template Component Template
Last updated: 2026-10-22
template Component Template
The template option supplies a component's HTML as a string, compiled at runtime in the full build (SFC files cover the compiled build).
| Group | Options: Rendering & Lifecycle |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
template: "<p>{{ msg }}</p>",
data() { return { msg: "hi" } }
}⚙️ Arguments
| value | An HTML string (or a #id selector pointing at a template element) |
|---|
Returns：No return value
▶ Example
Edit the code below and see the live result:
Output：
Shows a bold 'from the template option: hello'.💡 Key Points
ℹ️ Note Available only with the full build; runtime-only builds need SFCs or render functions.
💡 Tip Use backtick strings or a text/x-template script tag for longer markup.
⚠️ Warning Runtime compilation costs performance — production favours compiled SFCs.
🏷️ Related Rendering & Lifecycle
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Relation to the SFC <template>?
A The same construct, compiled ahead of time in SFCs.
Q Can template be a #id selector?
A Yes — point at a text/x-template script tag.
Q How to enable runtime compilation?
A Use vue.global.js rather than the runtime-only build, as this demo does.
