Vue <template> Element
Example
Using the built-in <template> element to toggle a section of HTML code with the v-if directive.
<ul>
<li>Trolltunga</li>
<template v-if="display">
<li>Potato Point</li>
<li>The souks of Marrakech</li>
<li>Dry Tortugas</li>
<li>Halong Bay</li>
</template>
<li>...</li>
</ul>
Definition and Usage
The HTML <template> tag becomes a built-in Vue <template> element when used with Vue directives v-if, v-else-if, v-else, v-for, or v-slot.
When used with v-if, v-else-if, v-else, or v-for, the built-in <template> element renders a section of HTML code.
When used with v-slot, the built-in <template> element directs a section of HTML code to a specified slot. See Example 1 below.
The built-in <template> element itself is not rendered as a DOM element.
Note: The top-level <template> element is a structural requirement when using SFCs (*.vue) files. For such top-level <template> elements, Vue directives cannot be used.
More examples
Example 1
Using the built-in <template> element to encapsulate more than one element and send them to a specific named slot with the v-slot directive.
<template>
<h1>App.vue</h1>
<p>The component has two div tags with one slot in each.</p>
<slot-comp>
<template v-slot:bottomSlot>
<h4>To the bottom slot!</h4>
<p>This p tag and the h4 tag above are directed to the bottom slot with the v-slot directive used on the template tag.</p>
</template>
<p>This goes into the default slot</p>
</slot-comp>
</template>
Example 2
Using the <template> element, more than one element can be rendered with the v-if directive.
<div id="app">
<template v-if="text.includes('pizza')">
<p>The text includes the word 'pizza'</p>
<img src="img_pizza.svg">
</template>
<p v-else>The word 'pizza' is not found in the text</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
text: 'I like taco, pizza, Thai beef salad, pho soup and tagine.'
}
}
})
app.mount('#app')
</script>
Try it Yourself »
Related Pages
Vue Tutorial: Vue v-slot
Vue Tutorial: Vue Templates
Vue Tutorial: Vue v-if Directive
Vue Reference: Vue v-if Directive
Vue Reference: Vue v-slot Directive
HTML Reference: HTML <template> tag
