Primevue 4 theme flashing on hard reload (Nuxt 3.11)

[katerlouis]

Describe the bug

Reproducer

//

PrimeVue version

4 rc1

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

I expect the theme to be there immediately, just like with PrimeVue 3– is this even possible under the new Theming engine?

[mertsincan]

Hello,

Do you use @primevue/nuxt-module?

[BoBo-Git]

I have the same problem, and I do use @primevue/nuxt-module. I think it's the timing of the loading of the styles that's causing the problem, but I can't find the way to control the styles loading.

[jerryisbusy]

Same problem! Html document render before css loaded. But how can we solve it?

[mertsincan]

Interesting! I couldn't replicate it. Could you please attach a sample project with your config for us to replicate?

[Kamsou]

@katerlouis Do you find fix pour that ? I had the same thing and the only fix i found was to disable auto import and declare my components manually. it solved the css import bug.

  primevue: {
    autoImport: false,
    components: {
      include: ['DatePicker', 'Select', 'Menu', 'ProgressBar'],
    },
    options: {
      theme: {
        preset: Aura,
      },
    },
  },

For information :

"nuxt": "^3.12.4",
"primevue": "^4.0.1",
"@primevue/nuxt-module": "^4.0.1",
"@primevue/themes": "^4.0.1",

[ilyasturki]

I have the same issue with primevue 4.2.1

The issue also arises when importing a component manually, whether autoimport is enabled or not.

[Jazcash]

I'm also having this issue, made a minimal sandbox here which demonstrates it: https://codesandbox.io/p/devbox/priceless-boyd-yw69c7?workspaceId=2eeaa102-0506-45c1-93d0-078fad731f2a

[NamesMT]

Same issue, have been happenning for a few months, some components (Button) are fine but some (InputNumber) will flash unstyled: https://starter-fullstack.is-the.top https://github.com/NamesMT/starter-fullstack

[alextana]

this is happening to me as well, with "@primevue/nuxt-module": "^4.2.5", and "nuxt": "^3.14.1592",

using the menu component:

https://github.com/user-attachments/assets/8e95e082-8729-4e40-b6d8-447ecc5df0a9

[alextana]

this is happening to me as well, with "@primevue/nuxt-module": "^4.2.5", and "nuxt": "^3.14.1592",

using the menu component:

Screen.Recording.2024-12-17.at.01.41.24.mov

in my case it doesn't seem to happen on the production build but just on development

[ostrui]

I have the same problem. Any updates from the June? How it can be fixed?

[mavyworx]

Same here. Happening on Nuxt 3.15.1 and PrimeVue 4.2.5

[ostrui]

Same here. Happening on Nuxt 3.15.1 and PrimeVue 4.2.5

I made a temporary trick but I am not sure of it's effectiveness and impact on SEO optimization. Still waiting for any reply from primevue team..

app.vue

onMounted(() => {
  // TODO remove after primevue fix
  setRootLoadedClass();
});

method

export function setRootLoadedClass() {
  document.documentElement.classList.add('loaded');
}

base app styles

:root {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

:root.loaded {
  visibility: visible;
  opacity: 1;
}

[cagataycivici]

Duplicate https://github.com/primefaces/primevue/issues/3070

[github-actions[bot]]

Due to PrimeTek's demanding roadmap for PrimeVue and the limited bandwidth of the core team, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[NamesMT]

@cagataycivici both this and #3070 is closed, need reopen one of them.

[farshidpg]

Same here. Happening on Nuxt 3.18.1and PrimeVue 4.3.7