The Nuxt Certification Program by VueSchool is out!

useId

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

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:

components/EmailField.vue
<script setup lang="ts">
const id = useId()
</script>

<template>
  <div>
    <label :for="id">Email</label>
    <input :id="id" name="email" type="email" />
  </div>
</template>
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.