Vue: Can components keep the tag wrapping them?

[fnlctrl]

Currently, component tags will be replaced by it's template:

Vue.component('my-component', {
    template: '<p>A custom component!</p>'
})

and

<my-component></my-component>

gets rendered to:

<p>A custom component!</p>

However, is there any way to let it be rendered like this, keeping the tag around template?

<my-component>
     <p>A custom component!</p>
</my-component>

If i do

Vue.component('my-component', {
    template: '<my-component><p>A custom component!</p></my-component>'
})

It will result in infinite recursion.

An option to keep the wrapping tags will be very useful,
say if i want to implement a component for tags like that in Angular Material
and I want to write something like this in html:

<tabs>
    <tab title="foo">baz</tab>
    <tab title="bar">whatever</tab>
</tabs>

which it gets rendered to:

<tabs>
    <tabs-wrapper>
        <tab-item>foo</tab-item>
        <tab-item>bar</tab-item>
    </tabs-wrapper>
    <tabs-content-wrapper>
        <tab-content>baz</tab-content>
        <tab-content>whatever</tab-content>
    </tabs-content-wrapper>
</tabs>

so it's obviously reasonable to keep the <tabs> tag.

otherwise, I will have to do something like:

Vue.component('tabs', {
        props: ['label'],
        template: '<tabs-avoid-recursion><content></content><tabs-avoid-recursion>',
});

which is verbose.

[simplesmiler]

There is an options for that.

Vue.component('my-component', {
    replace: false,
    template: '<p>A custom component!</p>'
})

[fnlctrl]

Thanks! problem solved. I'll try to add that to the Guide later.
This section in the guide is wrong: my-component doesn't have the replace: false option and it still gets rendered with tags around.
Or is it intended that components will implicitly get 'replace: false' option if it has <content></content> in its template? @yyx990803

[simplesmiler]

The replace option used to be false by default, but was changed to true is 0.12.2. I guess guide is slightly out of date and needs updating.

[yyx990803]

Guide has been updated.

[trevorhreed]

This thread is old, I know. Did the replace option get removed?

[sirlancelot]

Yes

[trevorhreed]

:( Out of curiosity, would you mind sharing the reasoning for this?

[sfaut]

What a pity to remove replace option. It can be useful to keep custom tags in rendered HTML.