Vue Tip: Avoid Empty Wrapper for Conditions

There are many situations when you need to conditionally display multiple Vue components. To avoid "empty" wrappers you should use the <template> instead of other HTML Tags. <template> will not generate any HTML tag and serves as an invisible wrapper. The final rendered result will not include the <template> element:

<template>
  <div v-if="loggedIn">
    <ProfileImage />
    <ProfileData />
  </div>
</template>

<template>
  <template v-if="loggedIn">
    <ProfileImage />
    <ProfileData />
  </template>
</template>

v-else and v-else-if can also be used on <template>.