Can Vue do that?

So I thought: Can I make something similar with Vue? I want to be able to write something like the following:

<template>

<vue-interpose :separator=”MySeparator”>

<my-list-item v-for=”item in items” :key=”item” v-bind="item" />

</vue-interpose>

</template>

Separator component should be passed as prop. There must be no dependency between the Interpose component and the content it interposes, as long it is an Array. The parent should be responsible for providing the content.

So this is the solution I came up with, using a render function with JSX:

As you can see, the separator is provided via prop, while the “main content” is rendered using the context.children attribute, pretty much the same as children in React.

Notice how I used h() method (a.k.a. createElement ) to create a real component from our separator prop. I haven’t find a way to pass a Vue component as prop, so I can only pass objects and then create components from them.

The functional parameter comes in handy, because it creates a stateless/instanceless component and provides you with a second context argument for the render function. Comfy!

Caveats of this implementation: