Replies: 12 comments 3 replies
-
|
I've released a tiny directive that may help: vue-bind-once. Sample usage: <div v-bind-once="{ id: Math.random() }" />This will work on both server and on client re-hydration. |
Beta Was this translation helpful? Give feedback.
-
|
@danielroe Is this method only available for binding on elements? I want this id to be available everywhere，like hooks. |
Beta Was this translation helpful? Give feedback.
-
|
Another option (not as flexible as vue-bind-once but inspired by it) is: vue-uid It generates an SSR-friendly unique identifier that is automatically assigned to the Sample usage: <script setup lang="ts">
import { ref } from 'vue'
const input = ref<null | HTMLElement>(null)
</script>
<template>
<div>
<label :for="input?.id">Input label</label>
<input v-uid ref="input" type="text">
</div>
</template>Both |
Beta Was this translation helpful? Give feedback.
-
|
In case you’re looking for a composable, I came up with that solution: https://github.com/liip/chusho/blob/main/packages/chusho/lib/composables/useCachedUid.ts#L20-L41 |
Beta Was this translation helpful? Give feedback.
-
|
is there any idea for vue2? |
Beta Was this translation helpful? Give feedback.
-
|
@LeBenLeBen I see different values for client and server when I use that composable in Nuxt |
Beta Was this translation helpful? Give feedback.
-
|
Agree. A stable |
Beta Was this translation helpful? Give feedback.
-
|
I believe this would be super useful for Nuxt (PR regarding useId), as well as headless-ui |
Beta Was this translation helpful? Give feedback.
-
|
This deserves a check indeed, with the new update that highlights props miss-match the console is getting polluted with miss-matches warnings, please give us a stable id <3 or let us disable the warnings for dev :p |
Beta Was this translation helpful? Give feedback.
-
|
Same problem Oku Primitives. this problem must be solved from the root, all components are similar. The whole ecosystem seems to be affected. |
Beta Was this translation helpful? Give feedback.
-
|
According to Twitter conversation, this is planned for 3.5: https://twitter.com/youyuxi/status/1745379112456429688 |
Beta Was this translation helpful? Give feedback.
-
|
Vue does not have Selective Hydration, Maybe getCurrentInstance().uid is based on the rendering order of the component. This ID should be stable in the client and server. React needs to use the component level to determine the ID because Selective Hydration will interrupt the order of component rendering. |
Beta Was this translation helpful? Give feedback.
-
|
For nuxt users |
Beta Was this translation helpful? Give feedback.
-
|
Is it a good idea to use the useId hook from Vue 3.5, to generate unique keys in lists? |
Beta Was this translation helpful? Give feedback.
-
|
Pretty sure this one applies to Vue
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
What problem does this feature solve?
In the SSR environment, sometimes it is necessary to create a stable id that is the same on the server and the client.
For example, a server request wants to put the requested data in html (for example
window.SSR_DATA={//data}), and then the client obtains and uses the data through a specifickeyfromSSR_DATA.We can encapsulate this method into a hook, for example called
useServerData.useServerDatamay be used multiple times by the same component, or it may be used by multiple components. Therefore, thiskeyis required to be globally unique and the same in the same place on the server and client.We can also guarantee uniqueness by passing the
keytouseServerData. But this is very inelegant and there is no way to guarantee that it will be unique. For example,useServerDatais used in multiple components, so we need to go to each component code to confirm whether there is any duplication.In fact, thiskeydoes not need to be concerned about the component at all.So can vue provide a way to generate id staying stable and unique between server and client?
A similar hook is provided in
react18, you can refer to.What does the proposed API look like?
Beta Was this translation helpful? Give feedback.
All reactions