Nuxt/docs/3.api/2.composables/use-id.md

title	description	links
useId	Generate an SSR-friendly unique identifier that can be passed to accessibility attributes.	label icon to size Source i-simple-icons-github https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/id.ts xs

::important This composable is available since Nuxt v3.10. ::

useId generates an SSR-friendly unique identifier that can be passed to accessibility attributes.

Call useId at the top level of your component to generate a unique string identifier:

<script setup lang="ts">
const id = useId()
</script>

<template>
  <div>
    <label :for="id">Email</label>
    <input :id="id" name="email" type="email" />
  </div>
</template>

::note useId must be used in a component with a single root element, as it uses this root element's attributes to pass the id from server to client. ::

Parameters

useId does not take any parameters.

Returns

useId returns a unique string associated with this particular useId call in this particular component.