[Bug]: `shadcn-nuxt` produces hydration warnings for some components

[e-tho]

Environment

Developement/Production OS: NixOS 24.05.20240106.46ae021 (Uakari) x86_64
Node version: 21.1.0
Package manager: npm@10.2.0
Radix Vue version: 1.2.7
Shadcn Nuxt version: 0.8.6
Vue version: 3.4.7
Nuxt version: 3.9.1
Nuxt mode: universal
Nuxt target: server
CSS framework: tailwindcss@3.4.1
Client OS: NixOS 24.05.20240106.46ae021 (Uakari) x86_64
Browser: Firefox 121.0

Link to minimal reproduction

https://stackblitz.com/edit/nuxt-starter-rgoa7e?file=pages%2Findex.vue

Steps to reproduce

Install and set up shadcn-nuxt with <Accordion> and <Button> components.

Describe the bug

Since 0.8.6 some components in my project such as <Button>, <AccordionTrigger> and <AccordionContent> produce these SSR-related warnings.

[Vue warn]: Hydration attribute mismatch on ...
- rendered on server: id="radix-75"
- expected on client: id="radix-1"
Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
You should fix the source of the mismatch. 
...

I tried initializing shadcn-vue again, deleting node_modules and package-lock.json and reinstalling the project, but nothing helped. It seems to come from the version of radix-vue used by shadcn-nuxt.

Expected behavior

No response

Conext & Screenshots (if applicable)

No response

[MuhammadM1998]

This issue is not on your end. It appeared after Vue 3.4 as it now checks for hydration mismatches in attributes. This also happens in Nuxt UI for example. There's a PR that introduces new useId composable that generates SSR friendly id (Stays the same on server & client) which will solve this issue. Maybe something similar needs to be ported to shadcn vue

[sadeghbarati]

https://github.com/radix-vue/radix-vue/discussions/558#discussioncomment-8045611

[jontybrook]

I'm also seeing this. Temporary solution for me was to pin vue to 3.3.13...

  "overrides": {
    "vue": "3.3.13"
  },

[valh1996]

I'm also seeing this. Temporary solution for me was to pin vue to 3.3.13...

  "overrides": {
    "vue": "3.3.13"
  },

It doesn't fix the problem, it just hides the warnings. The problem remains the same. A useId() hook should appear in version 3.5 of vue, making it easier to correct the problem.

[beejaz]

Seems there was a useId() added for nuxt 3.10

https://nuxt.com/blog/v3-10#ssr-safe-accessible-unique-id-creation

[mattickx]

This seems to happen with the auto imported component. Not with a manual imported component.

I've reported this to the Nuxt repo aswell with reproduction link: https://github.com/nuxt/nuxt/issues/25696

[peterhijma]

I had the same problem with the form example. Fixed this case locally inside FormItem.vue by removing the import from radix-vue, so it uses the one from Nuxt automatically:

<script lang="ts" setup>
import { provide } from 'vue'
import { useId } from 'radix-vue'  <-- remove this one
import { cn } from '@/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()

const id = useId()
provide(FORM_ITEM_INJECTION_KEY, id)
</script>

[mattickx]

I had the same problem with the form example. Fixed this case locally inside FormItem.vue by removing the import from radix-vue, so it uses the one from Nuxt automatically:

import { useId } from 'radix-vue'  <-- remove this one

This might be a solution for Form components, but I still have issues with plain components (auto imported). Example with Progress component, described in: https://github.com/nuxt/nuxt/issues/25696

[MercurialUroboros]

I'd like to point out that the solution @peterhijma works for Form 🙏 . Although I have the same issue on DropDownMenu, and it seems that i can't apply the same fix.

[MuhammadM1998]

@MercurialUroboros Try this https://github.com/radix-vue/shadcn-vue/issues/637#issuecomment-2198640328 in your app.vue

[mattickx]

@MercurialUroboros @MuhammadM1998 Did you have any issue with components like the Progress component? As described in https://github.com/nuxt/nuxt/issues/25696 I'm still having hydration warnings even though there is no use of useId() in these components

[SuperKojima]

Thank you!!

[maikeleckelboom]

Over the past six months, I’ve extensively used Shadcn and tested nearly every component. While the useId() fix for Nuxt has resolved most hydration issues, I’m still encountering a Vue hydration error with the Menubar component.

I’ve tried various approaches to address this, but the issue persists. I’m not aware of any current workarounds.