v-cloak Esconder o Template Não Compilado
Última atualização: 2026-10-22
v-cloak Esconder o Template Não Compilado
O v-cloak permanece no elemento até a compilação terminar; combinado com CSS, esconde o template bruto e evita o flash de {{ }} na primeira renderização.
| Grupo | Diretivas |
|---|---|
| Tipo | Diretiva |
| Escopo | Template |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
[v-cloak] { display: none; }
<div v-cloak>{{ msg }}</div>⚙️ Argumentos
| expression | Sem expressão |
|---|
Retorno：Diretiva, sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
On slow networks the raw braces stay hidden until Vue mounts and the real text appears.💡 Pontos-chave
⚠️ Aviso Você mesmo precisa escrever a regra CSS [v-cloak]{display:none} — o atributo não carrega estilo nenhum.
ℹ️ Nota Só é necessário com o build completo e sem bundler; o produto compilado de SFC nunca pisca.
💡 Dica O Vue remove o atributo após a compilação, então a regra de esconde para de valer.
🏷️ Diretivas relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Por que preciso escrever o CSS eu mesmo?
R É apenas um atributo de marcação — a regra [v-cloak]{display:none} fica por sua conta.
P Ainda é necessário em projetos modernos?
R Não com bundling de SFC (sem template bruto); apenas páginas CDN com o build completo precisam.
P O atributo é removido após a compilação?
R Sim — o Vue o remove na montagem e a regra de esconder deixa de valer.
