-
Notifications
You must be signed in to change notification settings - Fork 1.2k
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
No styles injected on SSR resulting in Large Layout Shifts on load #4210
Comments
I have exactly the same issue here while deploying to Cloudfare pages in SSG. The only solution I found was to add a loader on top of the content until everything is mounted. But that kind of defeats the purpose of SSR and SSG. I came to the same conclusion that styles loaded with useStyles were the issue. |
Please try to use the latest PrimeVue and Nuxt version. If problem still persists, please create a reproducer link using this example: https://stackblitz.com/edit/nuxt-starter-zhqkh9?file=plugins%2Fprimevue.js,nuxt.config.ts,app.vue |
We're unable to replicate your issue, if you are able to create a reproducer or add details please edit this issue. This issue will be closed if no activities in 20 days. |
You can easily replicate the issue: you currently have it on your main Primevue website. You have added a a cool loading animation to hide the layout shift and missing styles, if I block the JS I can clearly see the missing styles on the homepage 1st load. |
@tugcekucukoglu Please check out this fresh reproducer link I've created https://stackblitz.com/edit/nuxt-starter-fz1hbf?file=app.vue |
I'm having the same issue as well |
Any workarounds people have done besides adding a loader on top before mounting? I've found that adding styles manually helps but kind of defeats the purpose |
We are in the same boat. Our header uses the Menubar, so it jumps around when the page loads. Not an ideal user experience by any means! Having a loading icon for content of a page is acceptable, but not the header of the page. Seems like our best option might just be making a custom component instead of using the built-in Menubar. |
@Gerrproger |
@lwpinion You should install version < 3.30.0 for this to work. |
Can you add nonce for |
Hi all, I'm currently working on this issue. I'll solve this with a nuxtjs module in the next release and share the details here after completing it. Thanks a lot for your understanding! |
I have completed the nuxt module and will release it as soon as possible. Example configs; /* nuxt.config.js */
...
primevue: {
usePrimeVue: true,
options: {
// PrimeVue Config Options
// ripple, pt etc.
},
components: {
prefix: '',
name: undefined,
include: undefined,
exclude: undefined
},
directives: {
prefix: '',
name: undefined,
include: undefined,
exclude: undefined
},
composables: {
prefix: '',
name: undefined,
include: undefined,
exclude: undefined
}
}
... Best Regards, |
Since had been working great since @mertsincan's nuxt-primevue module was released, but Primevue v3.41.0 broke things and there's again large layout shifts at page load |
Describe the bug
So guys, you are not considering SSR at all.
There is an issue opened almost a year ago #3070 and successfully ignored by @tugcekucukoglu.
I was able to work around this by importing components like
import Button from 'primevue/button/Button.vue';
instead ofimport Button from 'primevue/button';
.But since v3.30.0 you removed
<style>
from vue files and introduceduseStyle()
which does not apply styles on SSR at all:primevue/components/lib/usestyle/UseStyle.js
Line 21 in 18d4c45
So now there is no way to inject component styles during SSR.
I hope you will not just close this issue like was done to #4184.
Reproducer
https://stackblitz.com/edit/nuxt-starter-fz1hbf?file=app.vue
PrimeVue version
3.x.x
Vue version
3.x
Language
TypeScript
Build / Runtime
Nuxt
Browser(s)
All
Steps to reproduce the behavior
Expected behavior
Primevue styles being injected during SSR.
The text was updated successfully, but these errors were encountered: