use-id-generator

Create an SSR-stable id factory for one component.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

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

Try it

Label repeated form fields

Generate unique, stable ids for fields that are added at runtime.

Open the interactive example

What to observe: Add guest twice. Each Guest name label focuses its own input because every input received a different id.

Call the generator once per element and keep the id with the item. Use Vue's useId() for one element per component; this generator suits lists.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { ref } from "vue";
import { useIdGenerator } from "@vizejs/composable/use-id-generator";

const nextId = useIdGenerator({ prefix: "guest" });
const guests = ref([{ id: nextId("name"), name: "" }]);

function addGuest() {
  guests.value = [...guests.value, { id: nextId("name"), name: "" }];
}
</script>

<template>
  <div class="composable-example">
    <p>Give every repeated field its own id so each label points at the right input.</p>
    <div v-for="(guest, index) in guests" :key="guest.id">
      <label :for="guest.id">Guest {{ index + 1 }} name</label>
      <input :id="guest.id" v-model="guest.name" />
    </div>
    <button type="button" @click="addGuest">Add guest</button>
    <output aria-live="polite">{{ guests.length }} guest fields with unique ids</output>
  </div>
</template>

Runtime contract

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.