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?
Vue UI install This will start the Vue User Interface and open a new window in your browser. On the left side of your screen, click on Plugins. Once there, search for Vuetify in the input field and install the plugin.
Why Vuetify? Since its initial release in 2014, Vue.js has grown to be one of the most popular JavaScript frameworks in the world. One of the reasons for this popularity is the wide use of components which enable developers to create concise modules to be used and re-used throughout their application.
Vuetify uses SASS/SCSS to craft the style and appearance of all aspects of the framework. Utilizing the sass/scss data option of your vue. config. js file, you can optionally pass in custom variables to overwrite the global defaults.
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"
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With