title: What is the purpose of <template> usage in Vuetify?
body: <p>I want to use Vuetify 2.0 in my project and currently reading about <a href="https://vuetifyjs.com/en/components/steppers" rel="noreferrer">v-stepper</a> component which is used to display progress through numbered steps.</p>
  
  <p>In the <a href="https://vuetifyjs.com/en/components/steppers#playground" rel="noreferrer">playground example</a> provided I see that they are using <code>&lt;template&gt;</code> element to wrap content of <code>v-stepper</code> component. HTML looks something like this (note: I removed unnecessary details):</p>
  
  <pre><code>&lt;v-stepper&gt;
    &lt;template v-for="n in steps"&gt;
      &lt;v-stepper-content
        :key="`${n}-content`"
        :step="n"
      &gt;
  
      &lt;/v-stepper-content&gt;
    &lt;/template&gt;
  &lt;/v-stepper&gt;
  </code></pre>
  
  <p>Notice the <code>&lt;template&gt;</code> tag used. What is the purpose of it? When should I use it as opposed to just putting the <code>&lt;v-stepper-content&gt;</code> directly inside of <code>&lt;v-stepper&gt;</code>? </p>
  
  <p>I've read a bit about <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template" rel="noreferrer"> element on MDN</a> 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).</p>