[Bug]: Hydratation Hydration node mismatch.

[SwartZCoding]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 20.6.1
Package manager: npm
Radix Vue version: 1.4.6
Vue version: 3.4.19
Nuxt version: 3.10.0
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss

Link to minimal reproduction

https://stackblitz.com/edit/github-shdqqw?file=app.vue

Steps to reproduce

Encountered when using Modal, Tabs, Avatar etc.
This issue stay since a long time and it's very very boring.
Should be reproducible on any radix element which uses Primitive.

Describe the bug

When you use things, you got warning on console because id on client & server are different...

Expected behavior

Have the same id on 2 sides ^^.

Context & Screenshots (if applicable)

No response

[ChrisGV04]

Hi @SwartZCoding! This is a duplicate of the pinned issue #577

I know, this is very annoying. However, right now this is an issue that exists because Vue itself does not have its own SSR-friendly composable for useId, which is why you get different id's on server and client hydrations.

Nuxt recently added useId officially, which is SSR-friendly. But Radix Vue is not Nuxt specific, so it must adhere to the general Vue specifications.

Right now, this will continue happening but it should not cause real problems. It is planned that Vue 3.5 will officially support an SSR-friendly useId, so it will be fixed until then.

[zernonia]

Closing so that we can track the issue here #577