how to populate slots in $cmp

[felixtosh]

I don't see any documentation on how to populate e.g. a componant with this setup:

<template>
  <div>
    <h1>{{ title }}</h1>
    <div class="bg-blue-600"><slot name="default"></slot></div>
    <div class="bg-purple-600"><slot name="test"></slot></div>
  </div>
</template>

I can only populate default by simply adding children, but the examples don't provide guidelines on how to properly deal with slots

[fenilli]

You mean when creating a custom component, or using a schema component?

[felixtosh]

I was trying a basic vue3 component I had imported with two template slots

What I want to achieve: use a repeating component that has some form descriptions / tips / graphics on the left and then a formkit component on the right

[felixtosh]

Simplified:

<COMPONENT>
<slot name="tip"> This is the so and so section, blablbla</slot>
<slot name="forms"> <Formkit 1 /> Formkit 2 /> ... </slot>
</COmponent>

And that repeatedly

[fenilli]

Can you make a simple reproduction so we can undertand better the code?

[felixtosh]

const schema = ref([
  {
    $cmp: "testElement",
    props: {
      title: "Test Title",
    },
    children: [
      {
        $el: "div",
        children: "This is where I add some descriptions ",
      },
      {
        $el: "div",
        name: secondSlot
        children: "This is the slot where I would add the FormKit element as children",
      },
    ],
  },
  {
    $cmp: "testElement",
    props: {
      title: "Test Title",
    },
    children: [
      {
        $el: "div",
        children: "This is where I add some descriptions ",
      },
      {
        $el: "div",
        name: secondSlot
        children: "This is the slot where I would add the FormKit element as children",
      },
    ],
  },
   {
    $cmp: "testElement",
    props: {
      title: "Test Title",
    },
    children: [
      {
        $el: "div",
        children: "This is where I add some descriptions ",
      },
      {
        $el: "div",
        name: secondSlot
        children: "This is the slot where I would add the FormKit element as children",
      },
    ],
  },
 // ... rest of the schema
]);

[fenilli]

Oh ok, so just basic vue components, you want to add a template to a slot in schema:

{
  $cmp: "testElement",
  children: [
    { $el: 'div', children: 'This is the default slot' }
  ],
  __raw__sectionsSchema: {
    slotName: { $el: 'div', children: 'This is the slotName slot' }
  }
}

[felixtosh]

Awesome thanks!