search

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
627 stars 105 forks source link

Layouts not working properly on static generator #201

Open jaimesemp opened 5 years ago

jaimesemp commented 5 years ago

Module version "@nuxtjs/vuetify": "1.8.3", "nuxt": "2.9.2",

Describe the bug I am using vuetify with the google-keep predefined layout (https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/examples/layouts/google-keep.vue).

On 

 npm run dev

everything works properly, but when I run 

npm run generate

and upload the files to a static hosting, the site is broken: for example, v-select doesn't work, and the labels of input box are not styled properly

They work as long as I program inside of the layout file (i.e. layouts/google-keep.vue).

But if I programa from the page (i.e page/index.vue) same code does not work properly.

See a real example here:

https://vuetify-poc.s3-eu-west-1.amazonaws.com/index.html

Repo: https://gitlab.com/jaimerockandroll/nuxt-vuetify-poc

To Reproduce

Steps to reproduce the behavior:

  1. Clone my repo: https://gitlab.com/jaimerockandroll/nuxt-vuetify-poc
  2. Execute npm run dev, notice like top and bottom sections behave exactly the same
  3. Execute npm run generate
  4. Deploy /dist to s3 or any other static hosting (gitlab, github... etc)
  5. Select from upper area works, select from bottom does not work. Same for input labels, they are styled slightly different (notice as the bottom input box is completely closed, and the line is -wrongly- crossing the label)

Expected behavior The bottom section should behave and look exactly like the upper section.

Screenshots

ShaggyTech commented 5 years ago

Try moving @nuxtjs/vuetify into buildModules instead of Modules, in your nuxt.config.js file. It looks like you had placed it there at some point and commented it out. Have you tried that before and had the same bug?

kevinmarrec commented 5 years ago

@jaimesemp I cloned your project, put @nuxtjs/vuetify and did nuxt build + nuxt start and it works. Nuxt generate shouldn't change anything.

jaimesemp commented 5 years ago

Thanks a lot to both of you for your answers. See my responses bellow

Try moving @nuxtjs/vuetify into buildModules instead of Modules, in your nuxt.config.js file. It looks like you had placed it there at some point and commented it out. Have you tried that before and had the same bug?

Yes, I tried both approaches, same result.

@jaimesemp I cloned your project, put @nuxtjs/vuetify and did nuxt build + nuxt start and it works. Nuxt generate shouldn't change anything.

Yes, nuxt build works (in fact finally I was able to upload using this approach: I changed mode to 'spa', built it and was able to upload working properly).

But nuxt generate produces the results commented (check it here):

https://vuetify-poc.s3-eu-west-1.amazonaws.com/index.html

kevinmarrec commented 5 years ago

@jaimesemp Sounds like a Nuxt issue and not something around Vuetify module itself, did you have been able to try again with updated dependencies (vuetify updates ?)

You can try the V2 Alpha of the module https://github.com/nuxt-community/vuetify-module/releases/tag/v2.0.0-alpha.0

kevinmarrec commented 4 years ago

@jaimesemp Any update ?

kevinmarrec commented 4 years ago

In fact it could be related to https://github.com/nuxt-community/vuetify-module/issues/208 issue, as static generator uses SSR.

See my last comment about https://github.com/kevinmarrec/nuxt-css-issue