Themes are broken when using Vuetify and nuxt-i18n
See original GitHub issueVersions 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
Issue Analytics
- State:
- Created 5 years ago
- Reactions:1
- Comments:8 (5 by maintainers)
Top Results From Across the Web
Theme configuration — Vuetify
Theme generator. Discover and generate new color themes for your Vuetify applications using our Theme Generator tool.
Read more >Upgrade Guide — Vuetify
Upgrade Guide. # Upgrading from v1.5.x to v2.0.x. Version 2 contains non backwards compatible breaking changes.
Read more >Display Breakpoints - Vuetify
In the following snippet we use the mounted and beforeDestroy lifecycle hooks to bind a resize listener to the window. <!-- Vue Component...
Read more >Text and typography — Vuetify
Disabled text has an opacity of 38% in light theme and 50% in dark. # Transform. Text can be transformed with text capitalization...
Read more >Get started with Vuetify
If you have not already created a new Vue.js project using Vue CLI, ... There are 2 ways we can use Vuetify with...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Found one fix that works even with SEO on, just add this in your vuetify nuxt plugin file:
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 Thank you for the watchful eye and correction. The updated documentation here helped resolve my issue in the recommended manner.