vuetify-module
vuetify-module copied to clipboard
Features that depend on screen size should indicate that they don't work in SSR
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.
A component that appears not to render server side is <v-menu>
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.
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?
still occuring, any hope to fix this issue?
Having this issue with Nuxt 3 and Vuetify 3 too.