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

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

Open
jfbloom22 opened this issue Jan 19, 2022 · 5 comments
Labels
feature request Feature request

Comments

@jfbloom22
Copy link

jfbloom22 commented Jan 19, 2022

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: #476
Folks are running into issues with breakpoints: #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 jfbloom22 added the feature request Feature request label Jan 19, 2022
@jfbloom22
Copy link
Author

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

@YonelBecerra
Copy link

YonelBecerra commented Jul 10, 2022

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
Copy link

jonabox commented Sep 23, 2022

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
Copy link

still occuring, any hope to fix this issue?

@maxostarr
Copy link

Having this issue with Nuxt 3 and Vuetify 3 too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Feature request
Projects
None yet
Development

No branches or pull requests

5 participants