What is the purpose of <template> usage in Vuetify?

Question

I want to use Vuetify 2.0 in my project and currently reading about v-stepper component which is used to display progress through numbered steps.

In the playground example provided I see that they are using <template> element to wrap content of v-stepper component. HTML looks something like this (note: I removed unnecessary details):

<v-stepper>
  <template v-for="n in steps">
    <v-stepper-content
      :key="`${n}-content`"
      :step="n"
    >

    </v-stepper-content>
  </template>
</v-stepper>

Notice the <template> tag used. What is the purpose of it? When should I use it as opposed to just putting the <v-stepper-content> directly inside of <v-stepper>?

I've read a bit about element on MDN but I am not sure how to use it specifically with Vuetify (or more generally with Vue.Js or just pure HTML/CSS/JS for that matter).

Answer 1

a <template> in the context of a v-for loop is an organizational item.

It does not get rendered by the browser. It is there to help with more complex rendering situations, where you don't want to limit yourself to a single element

In most cases you have a pretty straight forward mapping of items, each item in an array gets a <li> element. If this is the case, you're not likely to use this.

Here is an example of a problem where it might help...

Let's say you want to loop through an array of objects, and render a v-btn if the object is a button, and a v-image if the object is an image.

without template...

  <span v-for="item in items">
    <v-btn v-if="item.isBtn"></v-btn>
    <v-img v-else-if="item.isImg"></v-img>
  </span>

The problem is that each item will be wrapped in the span.

<span>
  <v-btn/>
</span>
<span>
  <v-img/>
</span>
<span>
  <v-btn/>
</span>

If you, however, use the template element, the wrapping element is no longer there.

  <template v-for="item in items">
    <v-btn v-if="item.isBtn"></v-btn>
    <v-img v-else-if="item.isImg"></v-img>
  </template>

and you will get...

  <v-btn/>
  <v-img/>
  <v-btn/>

You can also have it return multiple items in one instance of the loop.

in the vue docs at https://vuejs.org/v2/guide/list.html#v-for-on-a-lt-template-gt it shows an example of rendering more than one item per iteration:

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

There are some other cases where this might be helpful but not likely something you come across on a daily basis.

---

TL;DR;

Vue doesn't render the <template> element. It helps organize code chunk without the need of a single child element when looping

---

part 2.

When should I use it as opposed to just putting the directly inside of ?

Because the structure of vertical and horizontal steppers is different, the vuetify authors used it in the playground to allow users to toggle it. The first level of template (<template v-if="vertical">) is used do determine whether the next level should render the v-stepper-step elements as vertical or as horizontal. The second level is used to do the iterating of items.

example:

vertical (step and content are siblings):

<template>
  <v-stepper v-model="e6" vertical>
    <v-stepper-step :complete="e6 > 1" step="1">
      Select an app
      <small>Summarize if needed</small>
    </v-stepper-step>

    <v-stepper-content step="1">
      <v-card color="grey lighten-1" class="mb-12" height="200px"></v-card>
      <v-btn color="primary" @click="e6 = 2">Continue</v-btn>
      <v-btn text>Cancel</v-btn>
    </v-stepper-content>


    <v-stepper-content step="2">...</v-stepper-content>

    <v-stepper-step :complete="e6 > 3" step="3">...</v-stepper-step>

  </v-stepper>
</template>

horizontal (each step is separate):

<template>
  <div>
    <v-stepper>
      <v-stepper-header>
        <v-stepper-step step="1">Select campaign settings</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="2">Create an ad group</v-stepper-step>

        <v-divider></v-divider>

        <v-stepper-step step="3">Create an ad</v-stepper-step>
      </v-stepper-header>
    </v-stepper>

    <v-stepper value="2" class="mt-12">
      ...
    </v-stepper>

    <v-stepper value="3" class="mt-12">
      ...
    </v-stepper>
  </div>
</template>