No styles injected on SSR resulting in Large Layout Shifts on load

[Gerrproger]

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 of import Button from 'primevue/button';.
But since v3.30.0 you removed <style> from vue files and introduced useStyle() which does not apply styles on SSR at all:

primevue/components/lib/usestyle/UseStyle.js

Line 21 in 18d4c45

const defaultDocument = DomHandler.isClient() ? window.document : undefined;

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

1. Install Nuxt
2. Create Nuxt plugin as described in https://github.com/primefaces/primevue#nuxt-integration
3. Enabled SSR
4. Watch Primevue styles being injected only after hydration

Expected behavior

Primevue styles being injected during SSR.

[chris-paganon]

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.

[tugcekucukoglu]

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

[github-actions]

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.

[chris-paganon]

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.

[Gerrproger]

@tugcekucukoglu Please check out this fresh reproducer link I've created https://stackblitz.com/edit/nuxt-starter-fz1hbf?file=app.vue

[mannyyang]

I'm having the same issue as well

[mannyyang]

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

[lwpinion]

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.

[lwpinion]

I was able to work around this by importing components like import Button from 'primevue/button/Button.vue'; instead of import Button from 'primevue/button';.

@Gerrproger
Can you elaborate on this? I tried doing this with the Menubar, but it doesn't seem to make a difference.

[Gerrproger]

@lwpinion You should install version < 3.30.0 for this to work.

[tballak]

@lwpinion You should install version < 3.30.0 for this to work.

Can you add nonce for CSP to primevue if you use an older version (< 3.30.0) ?

[mertsincan]

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!

[mertsincan]

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,

[tmlmt]

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