[Bug]: Hydration attribute mismatch errors after upgrading to Nuxt 3.9.0 and Vue 3.4.0

[lotus-x]

Environment

Developement/Production OS: Arch Linux
Node version: 20.9.0
Package manager: [email protected]
Radix Vue version: 1.2.5
Vue version: 3.4.0
Nuxt version: 3.9.0
Nuxt mode: universal
Nuxt target: server
CSS framework: [email protected]
Client OS: Windows 10 19043.1110
Browser: Chrome 120.0.6099.130

Link to minimal reproduction

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

Steps to reproduce

Encountered when using Collapsible, Tabs, Toggles etc.

Should be reproducible on any radix element which uses Primitive under the hood.

Describe the bug

This has already reported in few places,

nuxt/nuxt#24994
nuxt/ui#1171

Maybe the current native useId implementation is messed up after the vue update? (nuxt/nuxt#23368)

Expected behavior

No response

Context & Screenshots (if applicable)

No response

[nikuscs]

Please see : #558

[lotus-x]

Please see : #558

Thanks!

[adirizky54]

There is new composable in Nuxt about this issue called useId SSR-safe accessible unique ID creation

[zernonia]

Yup @adirizky54 ! Atinux mentioned that to us but we want to have framework agnositc composable. This way anyone using @vue/server-renderer also benefit from it.

FYI useId composable was planned to release on Vue 3.5 😁

[BayBreezy]

I am getting the hydration mismatch warnings in the console for pretty much all the Radix components that use an id internally.
Sadly, I cant pass in my own id.

You are saying we have to just wait until vue releases their useId composable, correct? @zernonia

[zernonia]

Hey guys! With v1.5, we've added a workaround for the hydration issue that happened in Nuxt.

<!-- in Nuxt's app.vue -->
<script setup lang="ts">
import { ConfigProvider } from 'radix-vue'

const useIdFunction = () => useId()
</script>

<template>
  <ConfigProvider :use-id="useIdFunction">
    …
  </ConfigProvider>
</template>

[danielohling]

@zernonia

Wonderfull ! 🚀

[sabiqhasby]

Hey guys! With v1.5, we've added a workaround for the hydration issue that happened in Nuxt.

<!-- in Nuxt's app.vue -->
<script setup lang="ts">
import { ConfigProvider } from 'radix-vue'

const useIdFunction = () => useId()
</script>

<template>
  <ConfigProvider :use-id="useIdFunction">
    …
  </ConfigProvider>
</template>

Thanks, my problems has been solved.

[nidhishs]

Thanks, my problems has been solved.

@sabiqhasby, by solved, do you mean the warnings no longer show up, or is the UI functional with the warning still visible in the console?

[Ulrich-Mbouna]

Hey guys! With v1.5, we've added a workaround for the hydration issue that happened in Nuxt.

<!-- in Nuxt's app.vue -->
<script setup lang="ts">
import { ConfigProvider } from 'radix-vue'

const useIdFunction = () => useId()
</script>

<template>
  <ConfigProvider :use-id="useIdFunction">
    …
  </ConfigProvider>
</template>

What if we use another Css Framework for style, for example UIkit and faced hygratation mismatch errors?

[insuber]

@zernonia It seems that the issue still persists in some components, #919
And I've encountered the same problem while using MenubarTrigger, even after setting up <ConfigProvider :use-id="useIdFunction">

[Ev357]

@zernonia It seems that the issue still persists in some components, #919 And I've encountered the same problem while using MenubarTrigger, even after setting up <ConfigProvider :use-id="useIdFunction">

I also have the same issue with TabsTrigger

[zernonia]

Thanks @insuber @Ev357 ! I'll investigate shortly and reopen the ticket if needed ya 😁

[Ev357]

Ok, so my dumb mistake, i did not put my app.vue into the new app folder while i was migrating stuff over to Nuxt 4.

[michaelsieminski]

@zernonia this error still happening with Navigation Menu using NuxtLinks the ConfigProvider useId fix doesnt seem to help

[zernonia]

@michaelsieminski can you share a minimal reproduction please? 🙏🏻

[michaelsieminski]

@michaelsieminski can you share a minimal reproduction please? 🙏🏻

I have realized the example in the docs was just wrong as it was using 2 a tags, so I made a PR here: unovue/shadcn-vue#702