CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
margherita pizza
margherita pizza

Reputation: 7145

Vuetify how to add custom theme

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?

Upvotes: 6

Views: 13723

Answers (1)

ValDaHus
ValDaHus

Reputation: 376

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"
      }
})

Upvotes: 17

Related Questions