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

Lucassith
3
Lucassith
commented 9 months ago

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.

bug
1
igalil
0
igalil
commented 9 months ago

Hello, I have the same problem here.

The content of my head get replaced. But then the some tags are missing like:

  • meta tags,
  • link tags that contain the material icons and roboto front,
  • style tag with id="vuetify-theme-stylesheet".

If you slow down the internet speed (via Chrome) to Fast or Slow 3G, you'll see that it works fine. You can see in the Network tab that the woff2 fonts files are loaded before the vendor.js and app.js and the whole page looks OK.

0
jean-airoldie
0
jean-airoldie
commented 9 months ago

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 the page is rendered.

For instance, if vuex: false is set in the nuxt-i18n module configuration, then the styling loads properly. The same is also true if we remove the index.js from the /store directory.
I suspected that this was exclusive to SSR mode, which could have explained why it only affects the page's initial render, but it is not the case, as the issue persists even when mode: 'spa' is set in the nuxt.config.js.

0
dschreij
0
dschreij
commented 9 months ago

Same problem here. Only opening the developer tools somehow solves this already, so I guess it's a race issue somewhere.

0
Lucassith
3
Lucassith
commented 9 months ago

Opening dev tools throws webpack error which stops script execution.

0
dschreij
0
dschreij
commented 9 months ago

Setting vuex: false solved the issue, as @jean-airoldie suggested, but I don't know what the effect of this is on the long run. At first sight, it doesn't seem to matter much, and my app keeps working as expected.

0
Lucassith
3
Lucassith
commented 9 months ago

You can also use non-nuxt module version of i18n, just add
"vue-i18n": "^7.8.0", to packages.json then create a plugin like this:

`import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export default ({ app, store }) => {
// Set i18n instance on app
// This way we can use it in middleware and pages asyncData/fetch
app.i18n = new VueI18n({
locale: 'pl',
messages:
{
'en': require('~/lang/en-US.json'),
'pl': require('~/lang/pl-PL.json')
}
})
}`

add it to nuxt.config.js. $t will be available everywhere in your app. You can also use this instance to work with vee-validate:

`import Vue from 'vue'
import VeeValidate from 'vee-validate';
import pl from 'vee-validate/dist/locale/pl'

export default function(context) {
pl.messages.is = function(e, i) {
return "Pola nie są identyczne"
}

Vue.use(VeeValidate, {
i18n: context.app.i18n,
dictionary: {
pl
}
})
}`

This way vee-validate will be able to get current locale from i18n itself.

0
rhrn
0
rhrn
commented 9 months ago
0
gahabeen
0
gahabeen
commented 9 months ago

@rhrn is on to something, it does fix the issue in my app too when settin seo: false.

0
mapeal2
0
mapeal2
commented 9 months ago

Experiencing the same issue here, with the same fixes.

0
alanaasmaa
43
alanaasmaa
commented 9 months ago

Same problem. Here and same fix seo: false fixes it.

I noticed the problem when my title tags were dissapearing.

0
fgutr
0
fgutr
commented 8 months ago

same issue. vuex: false it solves , but i don't know what is the current locale using vuex

0
scippio
0
scippio
commented 8 months ago

same here:

I have a very similar problem. I'm added nuxt-i18n a then vuetify start failing.
I reloading page a only every sixth page reload is good. My primary classes + v-icon not render correctly etc…

"nuxt": "1.4.1",
"nuxt-i18n": "4.1.0",
"vuetify": "1.1.4"

google chrome 67.0.3396.99 (64bit)

BAD:
image
GOOD:
image

I can't use Vuetify with this bug … 😞 I'll try seo: false … etc…

UPDATE: with seo: false everything is fine!

0
dmydry
5
dmydry
commented 8 months ago

+1 vuex: false solved the problem
will try to find out the reason of this effect

0
klessou
0
klessou
commented 8 months ago

Any update on this issue ?

0
trylovetom
0
trylovetom
commented 7 months ago

Any update on this issue ?

0
kevinmarrec
230
kevinmarrec
commented 5 months ago

Any update ?

Cause currently it doesn't seem to have a solution with Nuxt I18n SEO + Vuetify both working fine.

0
haexhub
15
haexhub
commented 4 months ago

why is this issue closed? I still have this problem! seo:false solved it for the moment.

0
igalil
0
igalil
commented 3 months ago

Hello All,

seo: false is defenitely not a "fix" but a temporary workaround, as it disables the SEO function of nuxt-i18n.
Is there any news on this issue, anything… ?

Thanks a lot :)

0
langald
0
langald
commented 2 months ago

same issue:
in head section are missing link tags with google fonts and favicons

0
manniL
4.7k
manniL
commented 2 months ago
0
Informations
Bug ReportOpen
#c93 - Created 9 months ago