[Bug]: Hydration attribute mismatch in tabs component (SSR)

[DamianGlowala]

Environment

- Operating System: Windows_NT
- Node Version:     v21.7.1
- Nuxt Version:     3.11.1
- CLI Version:      3.11.1
- Nitro Version:    2.9.6
- Package Manager:  [email protected]
- Builder:          -
- User Config:      devtools, modules
- Runtime Modules:  radix-vue/nuxt, @nuxtjs/[email protected]
- Build Modules:    -

Link to minimal reproduction

https://github.com/DamianGlowala/radix-vue-ssr-repro

Steps to reproduce

Load the page and observe logs in Chrome DevTools. I copied the default example provided on Radix Vue website.

Describe the bug

There are ID mismatches between server and client.

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[zernonia]

Yup becuase Vue doesn't have useId yet, thus we need to have a workaround for hydration issue, by utilziing useId from Nuxt and inject into component. Check out

https://www.radix-vue.com/utilities/config-provider.html#hydration-issue-vue-3-5

[zernonia]

Related #577 (comment)

[DamianGlowala]

Ah, was looking at the docs but not at the right place. Wish this was handled by the module under the hood 😄 Thanks!