Vuetify: Themes are broken when using Vuetify and nuxt-i18n

[adrienbaron]

Versions and Environment

Vuetify: 1.2.2
Vue: 2.5.17
Browsers: Chrome
OS: Windows/macOS

Previously worked in:

Vuetify: 1.1.15
Vue: 2.5.17

Steps to reproduce

• Create a Nuxt + Vuetify project
• Update to Nuxt (1.4.2) and Vuetify 1.2.2
• Add nuxt-i18n (5.2.1) to the project
• Run the sample app

Expected Behavior

• Colors of link and button should be Vuetify primary color

Actual Behavior

• Primary color is not used (links are default browser colors, primary button is white)

Reproduction Link

https://github.com/adrienbaron/vuetify-bug-theme-nuxt-i18n

---

Additional Comments:

• Breaks starting Vuetify 1.2.0-beta0
• Also breaks on Nuxt Edge

[adrienbaron]

It seems both Nuxt i18n and Vuetify declare a mixin with the head() hook method:
https://github.com/vuetifyjs/vuetify/blob/dev/src/components/VApp/mixins/app-theme.js#L59
https://github.com/nuxt-community/nuxt-i18n/blob/master/src/plugins/seo.js

Apparently the one from Nuxt i18n overrides the one from Vuetify and Vuetify theme doesn't get added to the page meta by Nuxt.
One temporary fix is to disable the SEO options from Nuxt i18n by passing seo: false in it's configuration.
The issue might be more on Nuxt side and how it merges the mixins.

[adrienbaron]

Found one fix that works even with SEO on, just add this in your vuetify nuxt plugin file:

Vue.config.optionMergeStrategies.head = Vue.config.optionMergeStrategies.data

This should probably be added to Nuxt, I'll open an issue there and close this

EDIT: Apparently this fix breaks some of Vue Meta functionalities, so beware when using it for now.

EDIT2: You can now use $nuxtI18nSeo to fix this issue instead. It also fixes a performance issue with Nuxt i18n default SEO method. Here is the documentation on how to do it: https://nuxt-community.github.io/nuxt-i18n/seo.html#improving-performance
Check out this PR for details: https://github.com/nuxt-community/nuxt-i18n/pull/154

[adrienbaron]

There is a pull request waiting in Vue Meta, once it's get merged/released and updated in Nuxt, this issue will be fixed 🎉
https://github.com/declandewet/vue-meta/pull/262

[Extarys]

Thank you so much ! I've been wondering what I was doing wrong since I never really used Vuetify.

The issue was merged at the end of september, hope Nuxt will catch up soon!

[adrienbaron]

@Extarys I should have updated here but sadly the pull request had to be reverted. It was breaking a lot of use cases so they had to revert.
We are trying to find a way to fix a performance issue on Nuxt i18n though, and this fix would have for side effect to also fix the style issue:
https://github.com/nuxt-community/nuxt-i18n/issues/144

[javajon]

For those using Nuxt and happen to use both I18N as well as Vuetify you will find the Vuetify theme colors do not apply as soon as i18n is added. The theme will work again if you apply this workaround to plugins/vuetify.js

Vue.config.optionMergeStrategies.head = Vue.config.optionMergeStrategies.data

(as mentioned above. Thank you @adrienbaron !!)

I experienced this with recent Nuxt (2.4.3) + Vuetify (1.5.2) + nuxt-i18N (5.8.3)

[adrienbaron]

@javajon Hey! The issue is actually fixed without that hack, but you just need to change the way you register Nuxt i18n SEO.
Here is the documentation on how to do it: https://nuxt-community.github.io/nuxt-i18n/seo.html#improving-performance

This also greatly improves the performances of the app 👍

[javajon]

@adrienbaron Thank you for the watchful eye and correction. The updated documentation here helped resolve my issue in the recommended manner.