Vuetify how to add custom theme

Pathum Kalhan

I used vue cli3 to create my project.

vue create my-project

then I add vuetify to my project.

vue add vuetify

then after I created a custom theme from vuetify theme generator. now I want to add that theme to my project.

In the official documentation of vuetify adding a theme is like this

    Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'
  }
})

But my main.js looks like this

import '@babel/polyfill'
import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'

Vue.config.productionTip = false

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

In here there is nothing called Vuetify. So how can I add a custom theme in this project setup?

ValDaHus

You are using vue-cli 3 here :) Look at your project, there is a folder called: plugins.

src >> plugins

In this folder you will find vuetify.js, here you can just specify the theme you want to use as the documentation says.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify, {
    theme: {
        primary: "#f44336",
        secondary: "#e57373",
        accent: "#9c27b0",
        error: "#f44336",
        warning: "#ffeb3b",
        info: "#2196f3",
        success: "#4caf50"
      }
})

Collected from the Internet

Please contact [email protected] to delete if infringement.