'Vuetify props aren't being registered (Vue 3.2.13, Vuetify nightly 3.0.0)

<v-btn
  icon
  color="white"
>
  <v-icon>mdi-account</v-icon>
</v-btn>

vuetify button not using icon prop

package.json

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --port $(grep PORT .env | cut -d '=' -f2)",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@apollo/client": "^3.5.10",
    "@mdi/font": "5.9.55",
    "@vue/apollo-option": "^4.0.0-alpha.16",
    "autoprefixer": "^10",
    "canvas": "^2.9.0",
    "core-js": "^3.8.3",
    "pm2": "^5.2.0",
    "postcss": "^8",
    "roboto-fontface": "*",
    "tailwindcss": "^3",
    "vue": "^3.2.13",
    "vue-router": "^4.0.3",
    "vuetify": "npm:@vuetify/nightly@next",
    "vuex": "^4.0.0",
    "webfontloader": "^1.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.38.0",
    "sass-loader": "^10.0.0",
    "vue-cli-plugin-apollo": "~0.22.2",
    "vue-cli-plugin-tailwind": "~3.0.0",
    "vue-cli-plugin-vuetify": "~2.4.7",
    "vue-loader": "^17.0.0",
    "vuetify-loader": "^2.0.0-alpha.0"
  }
}

App.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

loadFonts()

createApp(App)
  .use(router)
  .use(store)
  .use(vuetify)
  .mount('#app')

./plugins/vuetify.js

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'

export default createVuetify(
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
)

What have I done wrong? I haven't found any vuetify props that work, they all just seem to be ignored. Maybe it's just the version I'm using, but I haven't found anything that suggests that.

apparently this is too much code now so here's another line stackoverflow :)

vue.jsvuetify.js


Solution 1:[1]

I was using the 2.x documentation instead of 3.0.0 Beta. The icon prop on buttons has changed, it no longer removes the background, and just makes the button round. (I'm assuming the other problems I was having are becuase of the same thing)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Muchie

Related Questions