Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
lucassith opened this Issue Jun 15, 2018 — with CMTY · 21 comments

Comments

Projects
None yet
Copy link

commented Jun 15, 2018 — with CMTY

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)

@cmty cmty bot added the cmty:bug-report label Jun 15, 2018

@lucassith lucassith changed the title Using with vuetify breaks styles (including <head> tag) . Breaks styles when using with vuetify (including <head> tag) . Jun 15, 2018

@igalil

This comment has been minimized.

Copy link

commented Jun 16, 2018

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.

This comment has been minimized.

Copy link

commented Jun 18, 2018 — with CMTY

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

This comment has been minimized.

Copy link

commented Jun 18, 2018

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

This comment has been minimized.

Copy link
Author

commented Jun 18, 2018

Opening dev tools throws webpack error which stops script execution.

This comment has been minimized.

Copy link

commented Jun 18, 2018 — with CMTY

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

@dschreij

This comment has been minimized.

Copy link

commented Jun 18, 2018

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

This comment has been minimized.

Copy link
Author

commented Jun 18, 2018

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

This comment has been minimized.

Copy link

commented 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

@gahabeen

This comment has been minimized.

Copy link
Contributor

commented Jun 27, 2018

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

@mapeal2

This comment has been minimized.

Copy link

commented Jun 27, 2018

Experiencing the same issue here, with the same fixes.

@alanaasmaa

This comment has been minimized.

Copy link

commented Jun 29, 2018

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

I noticed the problem when my title tags were dissapearing.

@fgutr

This comment has been minimized.

Copy link

commented Jul 9, 2018

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

@scippio

This comment has been minimized.

Copy link

commented Jul 12, 2018

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!

@dmydry

This comment has been minimized.

Copy link

commented Jul 14, 2018

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

@klessou

This comment has been minimized.

Copy link

commented Jul 30, 2018

Any update on this issue ?

1 similar comment
@trylovetom

This comment has been minimized.

Copy link

commented Aug 20, 2018

Any update on this issue ?

@kevinmarrec

This comment has been minimized.

Copy link
Member

commented Oct 5, 2018

Any update ?

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

@haexhub

This comment has been minimized.

Copy link

commented Nov 27, 2018

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

@igalil

This comment has been minimized.

Copy link

commented Dec 10, 2018

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

This comment has been minimized.

Copy link

commented Jan 11, 2019

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

@manniL

This comment has been minimized.

Copy link
Member

commented Jan 16, 2019

#154 might be a workaround ☺️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.