Nuxt.js: Vuetify custom theme ignored by Nuxt

[begueradj]

Version

v2.6.0

Reproduction link

https://github.com/nuxt/nuxt.js/issues/

Steps to reproduce

I am using Nuxt.js with Vuetify.js where I want to change the default theme colors.

I created a file: ~/plugins/vuetify.js to change the default primary color to red.

Here is its content:

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  theme: {
    primary: '#ff0000'
  }
})

In nuxt.config.js I asked Nuxt.js to use this plugin:

export default {
  plugins: ['~/plugins/vuetify']
}

What is expected ?

Calling primary must render the red color

What is actually happening?

The default primary color #1976d2 is displayed

Additional comments?

This is true maybe in whatever Nuxt.js version you use.

_{This bug report is available on Nuxt community (#c9463)}

[pimlie]

Please try with the vuetify module instead of your custom plugin: https://github.com/nuxt-community/vuetify-module/

[begueradj]

I resolved the problem, it was not a bug.
I posted the solution on StackOverflow
Hope this can be useful for someone else in the future.
Thank you

[masterDoomX]

@begueradj I also have the same problem what was your solution?

[Alecell]

Same here, the solution link is broken.

[begueradj]

@Alecell Indeed, sorry ... I noticed in newer Nuxt versions, you can control that in nuxt.config.js file which is in the root directory of your project

[begueradj]

@masterDoomX Sorry for the late reply, please just open nuxt.config.js, scroll down until you see what you are looking for.

[manchann]

@begueradj

Try this. I was in the same problem and solved it this one :)

vuetify: { theme: { themes:{ light:{ primary: '#ff9f1a' } } } },

I refer to the link,
https://vuetifyjs.com/ko/customization/theme

[gomezmark]

I using @nuxt/vuetify

then on my nuxt.config.js
buildModules: [ '@nuxtjs/vuetify', ], vuetify: { customVariables: ['~/assets/variables.scss'], theme: { dark: false, themes: { light: { primary: '#5398d9', } } } }

[begueradj]

Thank you for sharing @cjg9040

[BonBonSlick]

I set theme: disable: true,
still, default theme--lightapplied

[vZanchiV]

I set theme: disable: true,
still, default theme--lightapplied

same, you have find a soluce ?

[AllanPinheiroDeLima]

The docs should have mentioned that you need to envelope the app on tag in the customization section, shouldn't ?

Took me a couple hours to figure out