Angular ng-container equivalent in vue.js

Question

In Angular there is a tag called ng-container used like so

<ng-container *ngIf="false">this wont be shown</ng-container>

now as per the angular docs

The Angular is a grouping element that doesn't interfere with styles or layout because Angular doesn't put it in the DOM.

Now this is really handy in angular since there are often times I would like to group a set of html elements without using a <div></div>

For example

<div class="flex-div">
    <ng-container *ngIf="true">
       <img src="cool-img" alt="awesome">
       <h1>Cool Title</h1>
       <p>Cool Text</p>
    </ng-container>
    <ng-container *ngIf="false">
       <img src="not-so-cool-img" alt="awesome">
       <h1>Not So Cool Title</h1>
       <p>Not So Cool Text</p>
    </ng-container>
</div>

here I have a div that has a position of flex on it and also rules about what the elements inside do..

Now If I wrapped the elements in a normal div it will break my flex styles but with the ng-container it contains my elements but is not rendered to them DOM

Is there an equivalent in Vue??

Answer 1

You could use conditional grouping on a template as mentioned in the docs here. The template will serve as an invisible wrapper.

<div class="flex-div">
<template v-if="true">
   <img src="cool-img" alt="awesome">
   <h1>Cool Title</h1>
   <p>Cool Text</p>
</template>
<template v-if="false">
   <img src="not-so-cool-img" alt="awesome">
   <h1>Not So Cool Title</h1>
   <p>Not So Cool Text</p>
</template>
</div>