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:
1<template>
2 <div v-if="loggedIn">
3 <ProfileImage />
4 <ProfileData />
5 </div>
6</template>1<template>
2 <template v-if="loggedIn">
3 <ProfileImage />
4 <ProfileData />
5 </template>
6</template>v-else and v-else-if can also be used on <template>.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:
Vue Tip: Delay Loading Appearance of Spinner
Eager delay spinners are not a good user experience. They can make a snappy user interface feel slower. We want delay spinners to appear only after a perceivable delay.
Vue Tip: When to Use v-if
v-if has higher toggle costs while v-show has higher initial render costs.