i18n: Breaks styles when using with vuetify (including tag) .

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

Any update on this issue ?

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 😃

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

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 … 😞 I’ll try seo: false … etc…

UPDATE: with seo: false everything is fine!

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

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.

@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 👍

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",
    ...,
  },
  ...,

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

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.