useId() Gerar um ID único estável
Última atualização: 2026-10-22
useId() Gerar um ID único estável
useId() devolve uma string de ID única e estável por instância de componente: usada em atributos de acessibilidade como label/for e associação aria, garantindo consistência entre SSR e cliente.
| Grupo | Template e Auxiliares |
|---|---|
| Tipo | API |
| Escopo | No Componente |
| Versão do Vue | 3.5+ |
| Suporte a SSR | Sim |
📝 Sintaxe
const id = useId()
// <label :for="id">Nome</label><input :id="id">Retorno：String de ID único (estável dentro da mesma instância)
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Each instance gets a distinct ID; clicking a label focuses its input.💡 Pontos-chave
💡 Dica Use-o ao escrever componentes de formulário/modais amigáveis à acessibilidade, evitando IDs aleatórios escritos à mão que causam inconsistência em SSR.
⚠️ Aviso Múltiplas chamadas dentro do mesmo componente devolvem valores diferentes (independentes por ponto de chamada); se precisar reutilizar um valor, guarde-o em uma variável.
ℹ️ Nota Novidade do 3.5+; em versões anteriores, substitua gerando por conta própria prefixo + contador incremental.
🏷️ Template e Auxiliares relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que não usar Math.random()?
R Valores aleatórios diferem entre SSR e cliente, causando incompatibilidade na hidratação; useId garante o mesmo valor nos dois lados.
P O ID muda a cada re-renderização?
R Não, é estável dentro da mesma instância.
P Dá para personalizar o prefixo?
R A função em si não traz prefixo; se precisar de um formato específico, concatene por conta própria.
