Allow for <component> to be a conditional wrapper ie. only render children.

What problem does this feature solve?

This use case is often called a conditional wrapper . There sometimes is a need to wrap an element in a link or other elements for styling. But instead of making multiple similar components or providing a placeholder tag like div . It would be great to be able to simply leave out the wrapping. This is important since sometimes a even simple ‘div’ wrapper can break styling as well/ would need extra consideration/ work/ moving parts.

What does the proposed API look like?

I think the most clean and practical way for programmatic use would be to use the is prop. Either by passing in a falsy value, or by passing in ‘template’, a tag that doesn’t render in the html.

Template	Output
<component :is="false"><span>Child</span></component>	<span>Child</span>
OR
<component :is="'template'"><span>Child</span></component>	<span>Child</span>

[andrewsm80]

If something like this does eventually get implemented, I think it would make a lot more sense to use a directive, analogous to the v-if directive:

  <div v-wrap-if="someCondition">
    <span>
      This is a span that is sometimes wrapped up in a div.
    </span>
  </div>

[Harrald]

I was suprised to find out this is not supported by Vue. We need this! 😄