Can vue provide useId hook

[RhysXia]

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 specific key from SSR_DATA.

We can encapsulate this method into a hook, for example called useServerData.

useServerData may be used multiple times by the same component, or it may be used by multiple components. Therefore, this key is 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 key to useServerData. But this is very inelegant and there is no way to guarantee that it will be unique. For example, useServerData is used in multiple components, so we need to go to each component code to confirm whether there is any duplication.In fact, this key does 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?

const id1 = useId();
const id2 = useId(); // id1 !== id2

[danielroe]

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.

[RhysXia]

@danielroe Is this method only available for binding on elements? I want this id to be available everywhere，like hooks.

[jshimkoski]

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 id on the element.

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 vue-bind-once and vue-uid are only available when bound to elements as they are directives. Both use getSSRProps() as documented here: https://vuejs.org/guide/scaling-up/ssr.html#custom-directives

[LeBenLeBen]

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

[simonmaass]

is there any idea for vue2?

[wobsoriano]

@LeBenLeBen I see different values for client and server when I use that composable in Nuxt

[zernonia]

Agree. A stable id is also important for accessibility reason.
In the case for radix-vue, this is causing hydration mismatch and messed up the accessibility.

unovue/radix-vue#558

[zernonia]

I believe this would be super useful for Nuxt (PR regarding useId), as well as headless-ui

[nikuscs]

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

[productdevbook]

Same problem Oku Primitives. this problem must be solved from the root, all components are similar. The whole ecosystem seems to be affected.

[niksy]

According to Twitter conversation, this is planned for 3.5: https://twitter.com/youyuxi/status/1745379112456429688

[blowsie]

For nuxt users
https://nuxt.com/docs/api/composables/use-id

[szulcus]

Is it a good idea to use the useId hook from Vue 3.5, to generate unique keys in lists?

[wobsoriano]

Pretty sure this one applies to Vue useId too

Do not call useId to generate keys in a list. Keys should be generated from your data.

[szulcus]

Thanks