Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ConfigProvider): inject useId to provide composable from different framework #718

Merged
merged 12 commits into from
Mar 6, 2024

Conversation

zernonia
Copy link
Collaborator

@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

Copy link

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

@radix-vue radix-vue 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.

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.

None yet

2 participants