search

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
630 stars 106 forks source link

Features that depend on screen size should indicate that they don't work in SSR #490

Open jfbloom22 opened 2 years ago

jfbloom22 commented 2 years ago

Is your feature request related to a problem? Please describe. It is frustrating trying to use vuetify-module features like breakpoints only to learn that they are not supported on SSR. This module is specifically for Nuxt, so I figured it was a good bet that all these features documented here would work on SSR or be noted otherwise. However, features that depend on screen size, like breakpoints apparently do not work in SSR. They will work after hydration, but not before. A lot of folks, like myself, choose to use Nuxt for SSR.

Folks are running into a related issue with the v-table: https://github.com/nuxt-community/vuetify-module/issues/476 Folks are running into issues with breakpoints: https://github.com/nuxt-community/vuetify-module/issues/235 (this one is a little confusing because there was a bug here that caused breakpoints to continue to be broken after hydration. That issue has been fixed. What has not been fixed is breakpoints in SSR before hydration.)

Describe the solution you'd like Update the documentation to simply indicate which features are not supported on SSR. I have not compiled an comprehensive list, but at least v-table and breakpoints are not supported.

Describe alternatives you've considered Vuetify could document this on their side, but they do not currently have any documentation about Nuxt or SSR that I was able to find.

Additional context Just in case someone is not familiar: in order to test what is rendering in SSR, you can disable javascript: https://developer.chrome.com/docs/devtools/javascript/disable/ Then do a hard refresh of your app.

jfbloom22 commented 2 years ago

A component that appears not to render server side is <v-menu>

YonelBecerra commented 1 year ago

I'm not using nuxt but vuetify has the same issue without it. So I comment here.

<v-navigation-drawer> does not render in SSR too.

jonabox commented 1 year ago

Can confirm <v-navigation-drawer> takes a second to properly load on desktop. Even with the permanent prop, the component is always initialized closed. Is there anything I can do to do have navigation drawer render on the server?

truesteps commented 1 year ago

still occuring, any hope to fix this issue?

maxostarr commented 1 year ago

Having this issue with Nuxt 3 and Vuetify 3 too.