template Template do componente
Última atualização: 2026-10-22
template Template do componente
A opção template fornece o HTML do componente como uma string, compilada em tempo de execução no build completo (arquivos SFC cobrem o build compilado).
| Grupo | Opções: Renderização e Ciclo de Vida |
|---|---|
| Tipo | Opção |
| Escopo | No Componente |
| Versão do Vue | 3.0+ |
| Suporte a SSR | Sim |
📝 Sintaxe
export default {
template: "<p>{{ msg }}</p>",
data() { return { msg: "hi" } }
}⚙️ Argumentos
| value | Uma string HTML (ou um seletor #id apontando para um elemento template) |
|---|
Retorno：Sem valor de retorno
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo:
Saída：
Shows a bold 'from the template option: hello'.💡 Pontos-chave
ℹ️ Nota Disponível apenas no build completo; builds runtime-only exigem SFCs ou render functions.
💡 Dica Use template strings com backticks ou uma tag script text/x-template para marcações maiores.
⚠️ Aviso Compilação em tempo de execução custa performance — produção prefere SFCs pré-compilados.
🏷️ Renderização e Ciclo de Vida relacionados
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ FAQ
P Relação com o <template> do SFC?
R É o mesmo construto, compilado antecipadamente nos SFCs.
P O template pode ser um seletor #id?
R Sim — aponte para uma tag script text/x-template.
P Como habilitar a compilação em tempo de execução?
R Use vue.global.js em vez do build runtime-only, como este demo faz.
