DataTable: (Nuxt 3 project) Hydration attribute mismatch on paginator "rows-per-page" dropdown

[lmc3s3f0r]

Describe the bug

In a Nuxt 3 project with nuxt-primevue module, in a page using Datatable with paginator="true", when I reload the page, I get this warning:

"Hydration attribute mismatch on <div id=​"pv_id_30" class=​"p-dropdown p-component p-inputwrapper p-inputwrapper-filled p-paginator-rpp-options" data-pc-group-section=​"pagedropdown" data-pc-name=​"rowperpagedropdown" data-pc-extend=​"dropdown" data-pc-section=​"root">​…​</div>"

Can't make it on stackblitz, so I've attached a simple project reprducing it: https://github.com/lmc3s3f0r/bug_primevue_datatable_hydration_mismatch

Reproducer

https://github.com/lmc3s3f0r/bug_primevue_datatable_hydration_mismatch

PrimeVue version

3.51.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Nuxt

Browser(s)

Chrome latest

Steps to reproduce the behavior

1. Clone this repo: https://github.com/lmc3s3f0r/bug_primevue_datatable_hydration_mismatch
2. Open it and run npm run dev
3. Show Chrome Inspector, go to Console
4. Reload the page and you'll see the Hydration warning
5. Optionally, go to app.vue and on line 6, set paginator to "false", then reload the page and you'll see no warning message.

Expected behavior

I would expect no hydration warning message.

[i7slegend]

I thinks this bug relates to #5486 too

[axel-verse]

Try to pin vue version to 3.3.13. In my similar case, it solved the issue.

Also I found that NuxtUI has similar issue. I think it is Nuxt related.

[lmc3s3f0r]

Try to pin vue version to 3.3.13. In my similar case, it solved the issue.

Also I found that NuxtUI has similar issue. I think it is Nuxt related.

Thanks for the suggestion, but can't go lower than 3.4.21. Otherwise other packages will cause errors :(

[tugcekucukoglu]

It will be fixed for v3.52.0.

Thanks,