Rendering userland Vue child components for block previews

Kirby 3 Issues 🐛
,
1

Is there any way to reuse custom components (not the one from the Kirby Panel UI) inside block preview? Has anyone experience with that?

As an example, you define all your block previews a vue.js components, and now you make a nested block and want to dynamically render one of those previews.

Here’s a cookbook example of nested blocks and their preview plugins:

I wanted to do the same, but instead of the faq block using its markup for the item, it should reuse the faqItem block.

Shouldn’t something like that work?

        <div @dblclick="open" class="faq">
          <h2>{{ content.headline }}</h2>
          <div v-html="content.text"></div>
          <faq-item v-for="(item, index) in content.blocks" :key="index" v-bind="item" />
        </div>

I tried several variants, but as soon as I add the props definition to the faqItem component – which is necessary for the v-bind to work – the panel breaks as soon as a field is edited.

I can only find example of the panel native components being used in the cookbook, but never with own components.

2

I tried it once, but I have to try to find it again, since I didn’t include it in the block collection recipe, it probably required SFCs or so. If nobody else comes up with a solution, I’ll look into it again as soon as I find the time.

3

I actually tried it with SFCs, I just found, for demonstration reasons, the example from the documentation is easier to discuss than showing a <component :is="content.type" /> example (which will be the final goal of this).

I’m glad for whatever working example you have or come up with. Actually, I had to give up after a couple of hours and hitting some JavaScript runtime error as I found I might better ask first if this is even possible.

4

Blocks don’t seem to be registered solely by the name that you define in your plugin.
So using the component like <k-block-type-faq-item … /> or possibly <k-block-type-faqItem … /> for the example given could work.