Skip to content

Conversation

@zernonia
Copy link
Member

@zernonia zernonia commented Mar 2, 2024

Allow user to provide useId as an alternative from Vue 3.5 (coming soon hopefully) useId.

How to use:

<!-- 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>

credit to: Headless UI

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 2, 2024

Deploying with  Cloudflare Pages  Cloudflare Pages

Latest commit: 565cab1
Status: ✅  Deploy successful!
Preview URL: https://f4979d3c.radix-vue.pages.dev
Branch Preview URL: https://feat-useid.radix-vue.pages.dev

View logs

@unovue unovue deleted a comment from changeset-bot bot Mar 2, 2024
@zernonia zernonia linked an issue Mar 4, 2024 that may be closed by this pull request
@nidhishs
Copy link

nidhishs commented May 3, 2024

Allow user to provide useId as an alternative from Vue 3.5 (coming soon hopefully) useId.

How to use:

<!-- 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>

credit to: Headless UI

I tried the above with shadcn/nuxt, however I still get hydration mismatch issues in the console. The UI seems to be functional however. I'm not sure if this is expected.

@sadeghbarati sadeghbarati deleted the feat-useId branch June 26, 2024 05:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants