What's the use of <template> within a <template> in VueJS 2?

From my understanding, using <template> will not render out extra elements in the DOM. It's especially useful when you are conditionally adding multiple elements that don't exactly need a parent <div>. If the <div> serves no purpose other than to conditional multiple tags, that can be done without having an extra <div>.

I typically will default to using <template> until I need a <div> or other elements as a parent container, mainly to apply styles.

You are right, in your case you should simply use this :

<template>
   <div class="top-right links">
     <router-link v-if="authenticated" :to="{ name: 'home' }">
        {{ $t('home') }}
     </router-link>
     <router-link v-else :to="{ name: 'login' }">
        {{ $t('login') }}
     </router-link>
   </div>
</template>

But let's say you need conditional multiple tags without using a parent tag :

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
</template>

Read more :

• Conditional Groups with v-if on <template>
• v-for on a <template>