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>