useId() Generate a Stable Unique ID
Last updated: 2026-10-22
useId() Generate a Stable Unique ID
useId() returns a per-instance stable unique ID for accessibility attributes like label/for, keeping SSR and client output consistent.
| Group | Template & Helpers |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.5+ |
| SSR Support | Yes |
📝 Syntax
const id = useId()
// <label :for="id">Name</label><input :id="id">Returns：A unique ID string, stable within the instance
▶ Example
Edit the code below and see the live result:
Output：
Each instance gets a distinct ID; clicking a label focuses its input.💡 Key Points
💡 Tip Use it for accessible form and dialog components instead of random IDs.
⚠️ Warning Each call returns a different value — reuse a variable if needed.
ℹ️ Note 3.5+ only; older versions roll their own prefix plus counter.
🏷️ Related Template & Helpers
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why not Math.random()?
A Random values differ between server and client, breaking hydration.
Q Does the ID change on re-render?
A No — it is stable per instance.
Q Can I customise the prefix?
A The helper has no prefix option; concatenate your own.
