Create a v-if-parent template directive

[Tofandel]

What problem does this feature solve?

I would like to have an optional component but with the content being always rendered (so v-if doesn't work with this use case)

It's currently not possible without a lot of code duplication

<my-component v-if="condition">
    <the-content>I'm visible</the-content>
</my-component>
<the-content v-else>I'm visible</the-content>

What does the proposed API look like?

What I would like to be able to write instead is this

<my-component v-if-parent="condition">
    <the-content>I'm visible</the-content>
</my-component>

[posva]

It looks to me that you want to reuse parts of the template. This is a duplicate of #5401

For the moment, to reuse fragments of a template, you need to either create subcomponents or use JSX/render functions

[Tofandel]

The duplicate you provided would only be a bad workaround for the issue and will most likely not be implemented until some years

I'm asking for a different v-if which instead of not rendering the component and all it's children would not render the component but still render it's children.

Please reopen this issue

[posva]

In that case, that should be implemented in a custom component, in user lad. It's not possible to render the children in every scenario as there could be multiple of them

[Tofandel]

If some people stumble here, this is the component I ended up doing

export default {
    name: "v-if-parent",
    props: {
        condition: {
            type: Boolean,
            required: true
        }
    },
    render(el) {
        if (this.condition) {
            let parent = this.$scopedSlots.parent()[0];
            parent.children = this.$scopedSlots.default();
            return parent;
        } else {
            let children = this.$scopedSlots.default();
            if (children.length > 1) {
                //We can only return a single vnode so if multiple children, wrap them in a div
                return el('div', null, children)
            }
            return children;
        }
    }
}

And then use it like this

<v-if-parent :condition="showparent">
  <template #parent><a href="somelink" /></template>
  This text is always visible <span>You can include absolutely whatever you want in the default slot</span>
</v-if-parent>