CSS not Server Side Rendered with PrimeVue 4 / Nuxt 3

[cheike569]

Describe the bug

I'm on PrimeVue 4.0.0-rc.2 with Nuxt 3.12.12.

Theme styles are not rendered Server Side.

Whenever I do a full page reload, the layout shifts and it takes a second before the PrimeVue component chunks are loaded (including the styles).

This was working in PrimeVue 3 without issues.

nuxt.config.js

import Aura from '@primevue/themes/aura';

/* ... */

primevue: {
        options: {
            theme: {
                preset: Aura
            },
        }
}

Reproducer

https://stackblitz.com/edit/nuxt-starter-xjup5v?file=app.vue

Compare the PrimeVue component to a regular button with a custom CSS class. (see style.css)
The button will be red from the very beginning, and not shift later.

PrimeVue version

4.0.0-rc.2

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

Setup a new Nuxt Project with PrimeVue 4.

Expected behavior

CSS should be processed on the server and delivered with the initial response. This worked in PrimeVue 3.

[adrianpdm]

I also experienced this issue.
However, such issue only occur when manually importing component.

export default defineNuxtConfig({
  modules: ['@primevue/nuxt-module'],
  primevue: {
    components: {
      include: [], // set to empty array to prevent registering all components
    },
  },
})

Here's what i've tried so far:

• manually import in Vue SFC script block

  <script lang="ts">
  import PButton from 'primevue/button'
  export default {
    components: {
      PButton,
    },
  }
  </script>

• manually import in Vue SFC script setup block

  <script setup lang="ts">
  import PButton from 'primevue/button'
  </script>

• register components manually via module using addComponent

  export default defineNuxtModule({
    setup() {
      addComponent({
        filePath: 'primevue/button',
        name: 'PButton',
      })
    },
  })

• register components manually via plugin using nuxtApp.vueApp.component()

  import PButton from 'primevue/button'
  export default defineNuxtPlugin({
    setup(nuxtApp) {
      nuxtApp.vueApp.component('PButton', PButton)
    },
  })

• use unplugin-vue-components and primevue-autoimport-resolver to register used components automatically

All exhibits same behavior, that is CSS not server-rendered

[cheike569]

@mertsincan This was working in 4.0.0-rc.3, and is now broken again in 4.0.2.
See: https://stackblitz.com/edit/nuxt-starter-xjup5v?file=package.json

[danielklein-arch]

Any update on this issue ?

[DJsushi]

This issue still persists with version 4.2.2.

[maaticlang]

Currently it works with this configuration.

export default defineNuxtConfig({
   modules: [
		'@primevue/nuxt-module',
	],
  ...
  primevue: {
  		autoImport: false,
  		components: {
  			include: [
  				'Button',
  				'Divider',
  				'FloatLabel',
  				'IconFiled',
  				'InputIcon',
  				'InputText',
  			],
  		},
  		options: {
  			theme: {
  				preset: Aura,
  				options: {
  					prefix: 'p',
  					darkModeSelector: 'light',
  					cssLayer: false,
  				},
  			},
  		},
  	},
   ...
}