Vuetify-module: Theme colors don't change after mounted

[oanstein]

Environment

Vuetify Version: 2.1.6
Last working version: 2.1.5
Vue Version: 2.6.10
@nuxtjs/vuetify version : 1.9.0
Browsers: Google Chrome
OS: Linux

Steps to reproduce

Downgrade repo to [email protected] and mounted color is correct

Expected Behavior

Mounted color changes

Actual Behavior

Mounted color does not change and stays as default

Reproduction Link

https://codesandbox.io/s/codesandbox-nuxt-8tbth

Other comments

• Issue submitted here as well: https://github.com/vuetifyjs/vuetify/issues/9453
• Might be related to vue-meta changes: https://github.com/vuetifyjs/vuetify/commit/6d829efff05ff6d491a719b21f3ea88f5ce1aeaf
• Works with raw vuetify (not nuxt): https://codepen.io/Lowryderch/pen/QWWgWbp

[guilhermewaess]

@oanstein Having same problem here, thanks for reporting.

[guilhermewaess]

@oanstein Did you manage to fix it on production build?
Even locking the vuetify version with yarn resolutions, still happening :(

[Darkside73]

@guilhermewaess I've locked vuetify to 2.1.5 and problem disappeared

[guilhermewaess]

@Darkside73 did you use yarn resolutions to lock it?

[Darkside73]

No I didn't. Only locked version in package.json and executed yarn command.
Try to clean both node_modules and yarn cache

On Tue, Oct 29, 2019 at 3:40 PM Guilherme Waess [e-mail]
wrote:

@Darkside73 https://github.com/Darkside73 did you use yarn resolutions
to lock it?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/vuetify-module/issues/205?email_source=notifications&email_token=AACS5DAYACGFO37SSNANVUDQRA4NNA5CNFSM4JFFZJOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECQQSFQ#issuecomment-547424534,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACS5DAERS2HQ22OF6GSZJ3QRA4NNANCNFSM4JFFZJOA
.

[guilhermewaess]

@Darkside73 yeap, it was cleaned, the vuetify version running in production is 2.1.5 as expected, but no luck with the colours.

Locally (dev) is working perfect, in prod mode, no chance.

[Darkside73]

In my case v-toolbar becomes dark on page reload for a few moments and then
actual theme applied. After downgrade to 2.1.5 things back normal. I didn't
try the reproduction code from this issue in my environment

On Wed, Oct 30, 2019 at 10:59 AM Guilherme Waess [e-mail]
wrote:

@Darkside73 https://github.com/Darkside73 yeap, it was cleaned, the
vuetify version running in production is 2.1.5 as expected, but no luck
with the colours.

Locally (dev) is working perfect, in prod mode, no chance.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt-community/vuetify-module/issues/205?email_source=notifications&email_token=AACS5DFM26C4JWY4LVB2VRTQRFEH7A5CNFSM4JFFZJOKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOECTMNOI#issuecomment-547800761,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AACS5DCWEUNGD4KCFLSQEITQRFEH7ANCNFSM4JFFZJOA
.

[dholladay]

This issue is caused by https://github.com/vuetifyjs/vuetify/commit/6d829efff05ff6d491a719b21f3ea88f5ce1aeaf that released with 2.1.6.
I don't know if this is an issue with this vuetify-module or vuetify itself

[oanstein]

Possible fix here "fix: apply vueMeta directly instead of delaying": https://github.com/vuetifyjs/vuetify/pull/9503

[kevinmarrec]

It is an issue around Vuetify itself (indeed since https://github.com/vuetifyjs/vuetify/commit/6d829efff05ff6d491a719b21f3ea88f5ce1aeaf), it's really difficult stuff but there's some draft going on, I'm lacking time to help Vuetify team on this

[kevinmarrec]

@oanstein Could you try forcing vue-meta to use 2.2.2 version ?

[oanstein]

When I force [email protected] and [email protected] I get the following error (see https://codesandbox.io/s/codesandbox-nuxt-8tbth)

TypeError: Cannot read property 'keyName' of undefined
    at Theme.initVueMeta (webpack-internal:///./node_modules/vuetify/dist/vuetify.js:35533:96)
    at Theme.init (webpack-internal:///./node_modules/vuetify/dist/vuetify.js:35460:12)
    at eval (webpack-internal:///./node_modules/vuetify/dist/vuetify.js:30627:15)
    [...]
TypeError: Cannot read property 'themes' of undefined
   at Proxy.render (webpack-internal:///./node_modules/vue- 
   loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./pages/index.vue? 
   vue&type=template&id=2a183b29&scoped=true&:60:57)
   at VueComponent.Vue._render (webpack- 
   internal:///./node_modules/vue/dist/vue.runtime.esm.js:3536:22)
   [...]
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.
TypeError: Cannot read property 'themes' of undefined

[kevinmarrec]

Well, I don't remember why, but at least in mounted for the first load, you need to call applyTheme of Vuetify theme service : https://codesandbox.io/s/codesandbox-nuxt-z5dp6

If you're fine with it (as it fixes your issue), consider closing the issue.

Overall I think the theme watching is not properly working in mounted of the first page rendered, and if it needs a fix it's around Vuetify itself and not around here, so I'd stick closing this issue and stick with https://github.com/vuetifyjs/vuetify/issues/9453 to push up the watching issue of the theme that doesn't trigger the applyTheme automatically.

[oanstein]

It fixes the console errors but the theme's accent color is still red after mounted and not yellow; so the Initial issue is not fixed (?)

[kevinmarrec]

CSB seems to have some of issues, I have white screens...
I was able to have it yellow lately

[kevinmarrec]

I think I have been trapped by HMR

[oanstein]

It stays red on the page's initial (re)load but has the correct color if you jump from page to page after the initial load

(see example in: https://codesandbox.io/s/codesandbox-nuxt-8tbth)

[kevinmarrec]

Yeah so sounds like issue around Vuetify itself (or vue-meta)

[oanstein]

Ok, how would you describe the problem? So that I (or you) can update https://github.com/vuetifyjs/vuetify/issues/9453

[kevinmarrec]

@oanstein Mostly I'd say it's cause of https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/services/theme/index.ts#L187, which seems to be called unfortunately called just before mounted of Nuxt pages.

[oanstein]

@kevinmarrec do you know when the fix https://github.com/vuetifyjs/vuetify/pull/9503 will be merged? For me as a layman it looks like the fix is ready ...

[oanstein]

I found a hacky solution if you call this.$meta().refresh() on mounted it shows the colors. But at least in development I have now ugly default colors on the initial loading until it's done loading