Conditional Groups in Vue

Sometimes we need to apply a condition to a group of tags at once. In this case, we can combine them with a common parent and apply the condition to it:

html<template>
  <div v-if="isAuth">
    <p>+++</p>
    <p>+++</p>
    <p>+++</p>
  </div>
</template>

Sometimes we don't want to combine tags with a common parent. In this case, they can be combined with the template tag. This tag combines other tags, but does not get into the final layout. Let's impose a condition on this tag:

html<template>
  <template v-if="isAuth">
    <p>+++</p>
    <p>+++</p>
    <p>+++</p>
  </template>
</template>