Javascript is required
Mokkapps Logo

Vue Tip: Avoid Empty Wrapper for Conditions

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Jul 14, 2022
1 min read
|
99 views
Template
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:

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

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


If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more content from me. Alternatively (or additionally), you can also subscribe to my newsletter.