Extensible vue components?

[tyurderi]

What problem does this feature solve?

The idea is to create components which are able to extend another components templates.

Ofcourse the original components needs some breakpoints (or however they're called) where the extending component can join. For example the original components can define "blocks" which just have some content. A block as a name, a start and an end - somehow just a simple html tag.

Then the extending component is able to overwrite, prepend or append the block - identified by its name.

This would be useful if you want to build an extensible website to give developers the ability to extend your components without editing the components code itself - to keep it update-safe.

What does the proposed API look like?

OriginalComponent.vue

<template>
    <div class="container">
        <block name="container_body">
            Vue
        </block>
    </div>
</template>

ExtendingComponent.vue

<extends file="path/to/OriginalComponent.vue">
     <block name="container" append>
           is awesome.
     </block>
</extends>

The rendered result then should look like:

<div class="container">
    Vue is awesome.
</div>

Ofcourse, the ExtendingComponent.vue has to be imported somewhere (outside of the OriginalComponent.vue).

Thats just the basic idea of it. Ofcourse it could be extended to extend the vue components script - and so on.

[posva]

Dup of #5401

[tyurderi]

:( fak