2024-01-30 09:10:13 +00:00
|
|
|
---
|
|
|
|
|
title: "useId"
|
|
|
|
|
description: Generate an SSR-friendly unique identifier that can be passed to accessibility attributes.
|
|
|
|
|
---
|
|
|
|
|
|
2024-02-26 07:13:55 +00:00
|
|
|
::important
|
|
|
|
|
This composable is available since [Nuxt v3.10](/v3-10#ssr-safe-accessible-unique-id-creation).
|
|
|
|
|
::
|
|
|
|
|
|
2024-01-30 09:10:13 +00:00
|
|
|
`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:
|
|
|
|
|
|
|
|
|
|
```vue [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.
|
