<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">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)</p>
<p dir="auto">It's currently not possible without a lot of code duplication</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;my-component v-if=&quot;condition&quot;&gt;
    &lt;the-content&gt;I'm visible&lt;/the-content&gt;
&lt;/my-component&gt;
&lt;the-content v-else&gt;I'm visible&lt;/the-content&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span> <span class="pl-c1">v-if</span>="<span class="pl-s">condition</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">the-content</span><span class="pl-kos">&gt;</span>I'm visible<span class="pl-kos">&lt;/</span><span class="pl-ent">the-content</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">the-content</span> <span class="pl-c1">v-else</span><span class="pl-kos">&gt;</span>I'm visible<span class="pl-kos">&lt;/</span><span class="pl-ent">the-content</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">What I would like to be able to write instead is this</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;my-component v-if-parent=&quot;condition&quot;&gt;
    &lt;the-content&gt;I'm visible&lt;/the-content&gt;
&lt;/my-component&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">my-component</span> <span class="pl-c1">v-if-parent</span>="<span class="pl-s">condition</span>"<span class="pl-kos">&gt;</span>
    <span class="pl-kos">&lt;</span><span class="pl-ent">the-content</span><span class="pl-kos">&gt;</span>I'm visible<span class="pl-kos">&lt;/</span><span class="pl-ent">the-content</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">my-component</span><span class="pl-kos">&gt;</span></pre></div>
<h3 dir="auto">What problem does this feature solve?</h3>
<p dir="auto">In large applications, there are often families of components, within which components share most of the look/behavior, but vary slightly. This makes it desirable to reuse code between them. Some reuse can be achieved with slots, other is better with component inheritance. But while most of the parent component definition can be smart-merged with child definition, the template has to be either kept as is, or replaced entirely.</p>
<p dir="auto">I have seen multiple approaches to reusing component templates:</p>
<ol dir="auto">
<li>
<p dir="auto">Write very granular appearance-only components with many slots. While this sounds good in theory, in practice the granularity needed often makes this approach into an obstruction rather than abstraction.</p>
</li>
<li>
<p dir="auto">Implement all required variation in a single component and make it configurable with slots and props. The downside is that you are stuck with a god-component, which is hard to maintain and extend further.</p>
</li>
<li>
<p dir="auto">Extend the component, and use <code class="notranslate">&lt;parent&gt;...&lt;/parent&gt;</code> in the child template, using slots as "parts". The downside is that you have to "proxy" all props and slots down and events up. This is very cumbersome and fragile.</p>
</li>
<li>
<p dir="auto">Split the component in question further into "part" components, so that you can override only certain part. This gets tedious very quickly, especially when you need <code class="notranslate">v-bind</code> or <code class="notranslate">v-on</code> inside of the overridden part.</p>
</li>
<li>
<p dir="auto">Define "part" render functions among the methods, so that they can be overridden. The downside is that you can not really write such parts in template DSL, and the parts get disconnected from the main template, which makes it harder to understand.</p>
</li>
</ol>
<h3 dir="auto">What does the proposed API look like?</h3>
<p dir="auto">The Pug template engine (former Jade) implements a feature called <a href="https://pugjs.org/language/inheritance.html" rel="nofollow"><em>blocks</em></a>, which allows templates to extend other templates while overwriting (or extending) certain named blocks. I think this feature ported to Vue would fill the gap described above, and allow the templates to be more reusable.</p>
<p dir="auto">A possible syntax:</p>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- parent.vue --&gt;
&lt;template&gt;
  &lt;div&gt;
    &lt;block name=&quot;header&quot;&gt;
      &lt;h3&gt;Default header&lt;/h3&gt;
    &lt;/block&gt;
    &lt;block name=&quot;body&quot;&gt;
      &lt;p&gt;Default body&lt;/p&gt;
    &lt;/block&gt;
    &lt;block name=&quot;footer&quot;&gt;
      &lt;!-- no footer by default --&gt;
    &lt;/block&gt;
  &lt;/div&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-c"><span class="pl-c">&lt;!--</span> parent.vue <span class="pl-c">--&gt;</span></span>
&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">div</span>&gt;
    &lt;<span class="pl-ent">block</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>header<span class="pl-pds">"</span></span>&gt;
      &lt;<span class="pl-ent">h3</span>&gt;Default header&lt;/<span class="pl-ent">h3</span>&gt;
    &lt;/<span class="pl-ent">block</span>&gt;
    &lt;<span class="pl-ent">block</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>body<span class="pl-pds">"</span></span>&gt;
      &lt;<span class="pl-ent">p</span>&gt;Default body&lt;/<span class="pl-ent">p</span>&gt;
    &lt;/<span class="pl-ent">block</span>&gt;
    &lt;<span class="pl-ent">block</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>footer<span class="pl-pds">"</span></span>&gt;
      <span class="pl-c"><span class="pl-c">&lt;!--</span> no footer by default <span class="pl-c">--&gt;</span></span>
    &lt;/<span class="pl-ent">block</span>&gt;
  &lt;/<span class="pl-ent">div</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;</pre></div>
<div class="highlight highlight-text-html-vue notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;!-- child.vue --&gt;
&lt;!-- there is no root element (only blocks), so the parent template is reused --&gt;
&lt;template&gt;
  &lt;block name=&quot;header&quot;&gt;
    &lt;h2&gt;More pronounced header&lt;/h2&gt;
  &lt;/block&gt;
  &lt;block name=&quot;footer&quot;&gt;
    &lt;p&gt;Footer added by the child&lt;/p&gt;
  &lt;/block&gt;
&lt;/template&gt;"><pre class="notranslate"><span class="pl-c"><span class="pl-c">&lt;!--</span> child.vue <span class="pl-c">--&gt;</span></span>
<span class="pl-c"><span class="pl-c">&lt;!--</span> there is no root element (only blocks), so the parent template is reused <span class="pl-c">--&gt;</span></span>
&lt;<span class="pl-ent">template</span>&gt;
  &lt;<span class="pl-ent">block</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>header<span class="pl-pds">"</span></span>&gt;
    &lt;<span class="pl-ent">h2</span>&gt;More pronounced header&lt;/<span class="pl-ent">h2</span>&gt;
  &lt;/<span class="pl-ent">block</span>&gt;
  &lt;<span class="pl-ent">block</span> <span class="pl-e">name</span>=<span class="pl-s"><span class="pl-pds">"</span>footer<span class="pl-pds">"</span></span>&gt;
    &lt;<span class="pl-ent">p</span>&gt;Footer added by the child&lt;/<span class="pl-ent">p</span>&gt;
  &lt;/<span class="pl-ent">block</span>&gt;
&lt;/<span class="pl-ent">template</span>&gt;</pre></div>