useId · Nuxt Composables

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>

Parameters

useId does not take any parameters.

Returns

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

useHydration

Allows full control of the hydration cycle to set and receive data from the server.

useLazyAsyncData

This wrapper around useAsyncData triggers navigation immediately.