I've been struggling to customize the color scheme of my Vuetify theme for my Nuxt project by using (class="") without success. Despite browsing through various related threads, I still can't get it working.
Most discussions on this topic don't provide a direct solution for integrating Vuetify into the project initially, so here's what you need to do:
1. Install vuetify and @mdi/font
2. Create a file named vuetify.js in your plugins directory with the code snippet below:
import Vue from 'vue'
import Vuetify from 'vuetify'
import colors from './../config/colors'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.css'
Vue.use(Vuetify)
export default ctx => {
const vuetify = new Vuetify({
theme: {
themes: {
light: {
...colors
},
dark: {
// colors
}
}
}
})
ctx.app.vuetify = vuetify
ctx.$vuetify = vuetify.framework
}
3. Call it from your nuxt.config.js file like this:
plugins: ['~/plugins/vuetify.js']
In my situation, when creating a new Nuxt project using npm init nuxt-app@version, you have the option to set up the project with Vuetify by selecting specific configurations. Nuxt then builds the project with Vuetify, resulting in the following configuration in the nuxt.config.js file:
buildModules: [
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
],
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
}
}
},
My understanding suggests that adding custom color variables to the existing dark theme in nuxt.config.js should be straightforward. Here's how you can achieve it:
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
myColor: '#e456',
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3,
},
After defining your custom colors, you can use them in your HTML like this:
<template>
<v-app class="myColor">
<v-main>
<v-container fluid >
<Nuxt />
</v-container>
</v-main>
</v-app>
</template>
If anyone knows a simpler way to accomplish this, please share your insights!
Below are the details of my Nuxt project:
{
"name": "code",
"version": "1.0.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "code",
"version": "1.0.0",
"dependencies": {
"@nuxt/content": "^1.15.1",
"@nuxtjs/axios": "^5.13.6",
"core-js": "^3.19.3",
"nuxt": "^2.15.8",
"vue": "^2.6.14",
"vue-server-renderer": "^2.6.14",
"vue-template-compiler": "^2.6.14",
"vuetify": "^2.6.1",
"webpack": "^4.46.0"
},
"devDependencies": {
"@nuxtjs/vuetify": "^1.12.3"
}
},