fix(nuxt): tidy up remnants of previous useId implementation

This commit is contained in:
Daniel Roe 2024-12-02 13:26:33 +00:00
parent 1bdaefee79
commit e27cc5aef9
No known key found for this signature in database
GPG Key ID: CBC814C393D93268
3 changed files with 1 additions and 47 deletions

View File

@ -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.

View File

@ -1,3 +1,4 @@
import { useId as _useId } from 'vue' import { useId as _useId } from 'vue'
/** @deprecated Use `useId` from `vue` */
export const useId = _useId export const useId = _useId

View File

@ -114,11 +114,6 @@ interface _NuxtApp {
* The id of the Nuxt application. * The id of the Nuxt application.
* @internal */ * @internal */
_id: string _id: string
/**
* The next id that can be used for generating unique ids via `useId`.
* @internal
*/
_genId?: number
/** @internal */ /** @internal */
_scope: EffectScope _scope: EffectScope
/** @internal */ /** @internal */