Javascript is required
ยท
0 min read

Vue Tip: Avoid Empty Wrapper for Conditions

Vue Tip: Avoid Empty Wrapper for Conditions Image

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:

I will never share any of your personal data. You can unsubscribe at any time.