Vue <template> Element

❮ Previous Vue Built-in Elements Reference Next ❯

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>

Run Example »

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>

Run Example »

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 »

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