Vuetify: [Bug Report] 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
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

Might be related to vue-meta changes: https://github.com/vuetifyjs/vuetify/commit/6d829efff05ff6d491a719b21f3ea88f5ce1aeaf

[oanstein]

Seems the bug only occurs in combination with @nuxtjs/vuetify. Here is a working example [email protected]:
https://codepen.io/Lowryderch/pen/QWWgWbp

[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

[amritk]

@oanstein is there an equivalent hack to setting them on created?

https://codesandbox.io/s/codesandbox-nuxt-vyxu5?fontsize=14&hidenavigation=1&theme=dark
To avoid that initial flash of red

[oanstein]

@oanstein is there an equivalent hack to setting them on created?

https://codesandbox.io/s/codesandbox-nuxt-vyxu5?fontsize=14&hidenavigation=1&theme=dark
To avoid that initial flash of red

I mask it with an v-overlay and v-skeleton-loader. Unfortunately I have not found a better solution yet.

[amritk]

@oanstein Alright found a new workaround

created () {
    // Temporary until it gets fixed
    // https://github.com/nuxt/vue-meta/issues/481
    // https://github.com/vuetifyjs/vuetify/issues/9453
    // https://github.com/vuetifyjs/vuetify/issues/9499
    this.$vuetify.theme.themes.light.primary = { base: '#0E5E9E' }
    this.$vuetify.theme.themes.dark.primary = { base: '#0E5E9E' }
    /* eslint-disable */
    // @ts-ignore
    this.$vuetify.theme.applyVueMeta23()
}

mounted () {
    this.$meta().refresh()
}