Vuetify custom theme ignored by Nuxt

begueradj
40
begueradj
commented 5 months ago

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.

bug
0
pimlie
1.2k
pimlie
commented 5 months ago

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

0
begueradj
40
begueradj
commented 5 months ago

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

0
masterDoomX
0
masterDoomX
commented 3 months ago

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

0
Alecell
5
Alecell
commented 2 months ago

Same here, the solution link is broken.

0
begueradj
40
begueradj
commented 2 months ago

@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

0
begueradj
40
begueradj
commented 2 months ago

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

0
cjg9040
0
cjg9040
commented a month ago

@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

0
gomezmark
0
gomezmark
commented 14 days ago

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', } } } }

0
begueradj
40
begueradj
commented 14 days ago

Thank you for sharing @cjg9040

0
Informations
Bug ReportOpen
#c9463 - Created 5 months ago