Menu
×
   ❮   
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Vue Tutorial

Vue HOME Vue Intro Vue Directives Vue v-bind Vue v-if Vue v-show Vue v-for Vue Events Vue v-on Vue Methods Vue Event Modifiers Vue Forms Vue v-model Vue CSS Binding Vue Computed Properties Vue Watchers Vue Templates

Scaling Up

Vue Why, How and Setup Vue First SFC Page Vue Components Vue Props Vue v-for Components Vue $emit() Vue Fallthrough Attributes Vue Scoped Styling Vue Local Components Vue Slots Vue v-slot Vue Scoped Slots Vue Dynamic Components Vue Teleport Vue HTTP Request Vue Template Refs Vue Lifecycle Hooks Vue Provide/Inject Vue Routing Vue Form Inputs Vue Animations Vue Animations with v-for Vue Build Vue Composition API

Vue Reference

Vue Built-in Attributes Vue Built-in Components Vue Built-in Elements Vue Component Instance Vue Directives Vue Instance Options Vue Lifecycle Hooks

Vue Examples

Vue Examples Vue Exercises Vue Quiz Vue Server Vue Certificate

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>
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 »

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