use-id-generator

Create an SSR-stable id factory for one component.


Package	`@vizejs/composable/use-id-generator`
Own the source	`vize lib pull composable:use-id-generator`
Runtime exports	`useIdGenerator`
Gzip budget	1024 B

Usage

import { useIdGenerator } from "@vizejs/composable/use-id-generator";

Runtime contract

Utility	Category	Stability	SSR	Hydration	Cleanup	Targets	Host globals	Uses
`useIdGenerator`	state	experimental	safe	stable	none	web, server, worker, native, desktop, terminal	—	—

API

`useIdGenerator`

Create an SSR-stable id factory for one component. Each call to the returned function yields <prefix>-<seed>-<hint>-<n> with a per-generator counter, so as long as ids are generated in the same order on the server and the client (for example during setup), the markup hydrates without mismatches. The seed comes from Vue's useId() inside components, which is itself stable across SSR and hydration; outside components pass an explicit seed. Characters outside [A-Za-z0-9_-] are replaced so ids are valid in selectors.

function useIdGenerator(options: UseIdGeneratorOptions = {}): IdGenerator

const nextId = useIdGenerator({ prefix: "field" });
const inputId = nextId("input"); // "field-v-0-input-0"

Types

`UseIdGeneratorOptions`

Options for useIdGenerator.

Member	Type	Description
`prefix`?	`string`	Namespace placed in front of every id.
`seed`?	`string`	Stable seed identifying this generator. Defaults to Vue's `useId()` inside a component (identical on server and hydrating client), or to `"root"` outside one.