question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Themes are broken when using Vuetify and nuxt-i18n

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:1
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

7reactions
adrienbaroncommented, Feb 21, 2019

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

3reactions
javajoncommented, Feb 23, 2019

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found