Hydration mismatch in Galleria with Nuxt

[Gonzo17]

Describe the bug

When using PrimeVue in a Nuxt application with the Nuxt module, the Galleria component does have a hydration mismatch.

A quick fix is to add :id="useId()" to the <Galleria> component.

I've had a look into the internals of PrimeVue and it seems like useId from Vue is already used, so I'm not really sure why the quick fix above works.

I've also tried some other components of PrimeVue, they didn't seem to have problems with hydration, but that was just kind of a smoke test since I don't have the time to test all components.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/primevue-galleria-hydration-mismatch?file=app%2Fcomponents%2FMyGalleria.vue

Environment

Vue & Nuxt in the newest version with PrimeVue and it's Nuxt module in the newest version

Vue version

3.5.13

PrimeVue version

4.2.5

Node version

No response

Browser(s)

No response

Steps to reproduce the behavior

• Start the nuxt application
• Open the application in the browser and open the developer tools of your browser
• The warning for the hydration mismatch appears in the console
• For each reload the IDs that mismatch increase

Expected behavior

There should not be a hydration mismatch