mirror of
https://github.com/nuxt/nuxt.git
synced 2024-12-04 19:37:18 +00:00
fix(nuxt): tidy up remnants of previous useId
implementation
This commit is contained in:
parent
1bdaefee79
commit
e27cc5aef9
@ -1,42 +0,0 @@
|
||||
---
|
||||
title: "useId"
|
||||
description: Generate an SSR-friendly unique identifier that can be passed to accessibility attributes.
|
||||
links:
|
||||
- label: Source
|
||||
icon: i-simple-icons-github
|
||||
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/id.ts
|
||||
size: xs
|
||||
---
|
||||
|
||||
::important
|
||||
This composable is available since [Nuxt v3.10](/blog/v3-10#ssr-safe-accessible-unique-id-creation).
|
||||
::
|
||||
|
||||
`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>
|
||||
```
|
||||
|
||||
::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.
|
@ -1,3 +1,4 @@
|
||||
import { useId as _useId } from 'vue'
|
||||
|
||||
/** @deprecated Use `useId` from `vue` */
|
||||
export const useId = _useId
|
||||
|
@ -114,11 +114,6 @@ interface _NuxtApp {
|
||||
* The id of the Nuxt application.
|
||||
* @internal */
|
||||
_id: string
|
||||
/**
|
||||
* The next id that can be used for generating unique ids via `useId`.
|
||||
* @internal
|
||||
*/
|
||||
_genId?: number
|
||||
/** @internal */
|
||||
_scope: EffectScope
|
||||
/** @internal */
|
||||
|
Loading…
Reference in New Issue
Block a user