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

lucassith commented 6 years 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.

_{This bug report is available on Nuxt community (#c93)}

igalil commented 6 years 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.

jean-airoldie commented 6 years 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.

dschreij commented 6 years ago

Same problem here. Only opening the chrome developer tools somehow solves this already: with the dev tools open a page renders correctly after a refresh, but when closed it's missing required styles. I guess it's a race issue somewhere.

lucassith commented 6 years ago

Opening dev tools throws webpack error which stops script execution.

zsavajji commented 6 years ago

Experiencing same issue, also downgrading to 3.3.1 does not solve the error.

dschreij commented 6 years 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.

lucassith commented 6 years ago

You can also use a 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.

However keep in mind that you lose some of the functionality of nuxt module.

rhrn commented 6 years ago

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

gahabeen commented 6 years ago

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

mapeal2 commented 6 years ago

Experiencing the same issue here, with the same fixes.

alanaasmaa commented 6 years ago

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

I noticed the problem when my title tags were dissapearing.

fgutr commented 6 years ago

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

scippio commented 6 years 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: GOOD:

I can't use Vuetify with this bug ... :disappointed: I'll try seo: false ... etc...

UPDATE: with seo: false everything is fine!

dmydry commented 6 years ago

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

klessou commented 6 years ago

Any update on this issue ?

trylovetom commented 6 years ago

Any update on this issue ?

kevinmarrec commented 6 years ago

Any update ?

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

haexhub commented 6 years ago

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

igalil commented 5 years 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 :)

langald commented 5 years ago

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

manniL commented 5 years ago

https://github.com/nuxt-community/nuxt-i18n/pull/154 might be a workaround ☺️

estylehq commented 5 years ago

in my case, is not helpful seo: false and return this.$nuxtI18nSeo; in ~/layout/default.vue:head()

missing style-id:vuetify-theme-stylesheet and link alternates data.

😢 😫

~/layout/default.vue

export default {
head() {
return this.$nuxtI18nSeo();
},
components: {
...
},
data() {
return {
  ...
};
},
computed: {
...
},
methods: {
...
},
};
</script>

~/lang/config.js

export default {
locales: [
{
  code: 'ko',
  iso: 'ko-KR',
  name: '한국어',
  file: 'ko-KR.js',
},
{
  code: 'en',
  iso: 'en-US',
  name: 'English',
  file: 'en-US.js',
},
],
defaultLocale: 'ko',
lazy: true,
langDir: 'lang/',
seo: false,
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
},
};

~/nuxt.config.js

import langConfig from './lang/config';
...
modules: [
// Doc: https://axios.nuxtjs.org/usage
'@nuxtjs/axios',
['nuxt-i18n', langConfig],
],
...

package.json

...,
"dependencies": {
"nuxt": "^2.4.0",
"nuxt-i18n": "^5.12.3",
"vuetify": "^1.5.5",
"vuetify-loader": "^1.2.1",
...,
},
...,

stale[bot] commented 5 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

kevinmarrec commented 5 years ago

Can someone try with Vuetify 2 and tell me if it's still breaking ? Thanks.

ptdev commented 5 years ago

Hi,

I'm using latest nuxt-vuetify module (which is using vuetify v2) along with nuxt-i18n and I also have this issue.

Setting the seo parameter to false appears to solve it.

kevinmarrec commented 5 years ago

@ptdev Can you try with nuxt-edge instead of nuxt ? It ships vue-meta@2 which should have fixed this issue (through https://github.com/nuxt/vue-meta/pull/373).

If it works, you will be able to use the seo parameter back starting Nuxt 2.9.

EDIT : You can also probably directly install vue-meta@2 in your project.

ptdev commented 5 years ago

@kevinmarrec you're right.

I've just updated to nuxt-edge and can confirm that it does indeed appear to be fixed.

Thanks for the support 👍

manniL commented 5 years ago

Awesome! Closing here then :relaxed:

nuxt-modules / i18n