Lightrun
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.

Breaks styles when using with vuetify (including <head> tag) .

See original GitHub issue

Version

v4.0.0

Reproduction link

https://github.com/Lucassith/vuetify-nuxt-i18n-bug

Steps to reproduce

Clone the repo and run yarn install && yarn dev. Open localhost:3000. See that the button’s color “fades off” with each refresh. Also you can observe that all of the page changes its style + head tag does not contain all the meta.

You can see how it should look like when you remove “nuxt-i18n” from modules (or entire modules key) in nuxt.config.js.

What is expected ?

Load styles properly.

What is actually happening?

Does not load styles properly. As an example you can observe that button “primary” with text “Test” should be green.

<div align="right">This bug report is available on Nuxt community (#c93)</div>

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:12
  • Comments:28 (2 by maintainers)

github_iconTop GitHub Comments

9reactions
rhrncommented, Jun 20, 2018

It’s happen after meta refresh in vue-meta https://github.com/declandewet/vue-meta/blob/798d5a420cd772022cfb540a195e9aeca3b121a1/src/shared/plugin.js#L94

If set seo: false looks good

6reactions
trylovetomcommented, Aug 20, 2018

Any update on this issue ?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Breaks styles when using with vuetify (including <head> tag)
Hi, I'm having the same issue. From my understanding, this is caused by the nuxt-i18n vuex module registration, but only the first time...
Read more >
Text and typography — Vuetify
Control the size and style of text using the Typography helper classes ... Text breaking and the removal of text-transform is also possible....
Read more >
Vuetify - CSS not working (taking effect) inside component
NOTE: Make sure to include styles as per docs. Also in case of broken components make sure that your app is wrapped inside...
Read more >
How to Create Button with Line Breaks - W3docs
The easiest way to have a line break is using the <br> tag on your text. It is used for inserting a single...
Read more >
hyphens - CSS: Cascading Style Sheets - MDN Web Docs
If supported, hyphenate-character may be used to specify an alternative hyphenation character to use at the end of the line being broken. Syntax....
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
Previous page

Default locale & browser language detection confusion

Next page

Set cookie to locale that it redirected to, and always redirect (unless manually switched to different locale)