[Vuejs]-Vuetify – custom color cannot be applied

1👍

Right now you’re calling Vuetify (Vue.use('vuetify')). This won’t work because Vue.use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.

Instead, remove the remove both Vue.use('Vuetify', ...) and replace with before new Vue({..}).

import Vue from 'vue'
import App from './App.vue'

import Vuetify, {
  VApp, // required
  VNavigationDrawer,
  VFooter,
  VToolbar
} from 'vuetify/lib'

import { Ripple } from 'vuetify/lib/directives'

Vue.config.productionTip = false

Vue.use(Vuetify, {
    components: {
        VApp,
        VNavigationDrawer,
        VFooter,
        VToolbar
    },
    directives: {
        Ripple
    }, 
    theme: {
        "primary": "#FB8C00",   
        "secondary": "#424242",
        "accent": "#FF5252",
        "error": "#FF5252",
        "info": "#2196F3",
        "success": "#4CAF50",
        "warning": "#FB8C00"
    }
})

new Vue({
  render: h => h(App),
}).$mount('#app')
👤Frank

-1👍

import Vuetify, {
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar
} from ‘vuetify/lib’

import Vuetify, {
VApp, // required
VNavigationDrawer,
VFooter,
VToolbar
} from ‘vuetify’ // removing /lib fixed the problem

Vue version: Vue CLI v3.2.1
Vuetfiy version: 1.4.0

👤leo888

Leave a comment