is there a plan to support slot ?

[gicque]

slots can be usefull to compose components and are more usefull in some than props/attributes
Is there a plan to support slots and named slots ?

[XLordalX]

I second this.

[justJokee]

need this so much😭

[nervusdm]

This would be great

[hellogerard]

My hacky solution:

Call like this:

<div v-scope="LayoutComponent()" @vue:mounted="mounted($el)">
  <slot class="hidden">
    <p>Slot contents</p>
  </slot>
</div>

Component:

<script>
  const LayoutComponent = () => ({
    $template: '#layout-template',
    slot: null,
    mounted(el) {
      this.slot = el.querySelector('slot').innerHTML;
    },
  });
</script>

<template id="layout-template">
  <div class="container">
    <h2>My Layout</h2>
    <div v-html="slot"></div>
  </div>
</template>

[jmaximusix]

I also came up with a solution using nested templates using v-scope:

<template id="sharedtemplate">
    <h1>Stuff all instances of the component share...</h1>
    <slot v-scope="FillSlot(slot)"></slot>
</template>

<div v-scope="MyComponent('#first')">
    <template id="first">
        <p>This is the slot content for the first component</p>
    </template>
</div>

<div v-scope="MyComponent('#another')">
    <template id="another">
        <p>This is the slot content of the second</p>
    </template>
</div>

import { createApp } from 'https://unpkg.com/petite-vue?module';

function MyComponent(slot) {
    return {
        $template: '#sharedtemplate',
        slot
    }
}

function FillSlot(slot) {
    return {
        $template: slot
    }
}

createApp({
    MyComponent,
    FillSlot,
}).mount("#app")

The benefit of this solution is that you can easily define other Components with multiple slots to be filled (and all can use the same "FillSlot()" function still), the disadvantage is you always have to use ids which could get annoying when creating many instances of your component.
So in my opinion this solution is somewhere between hacky and elegant, but I'll let you be the judge

[jikkuatwork]

Very interesting! I wonder whether this approach can do multiple components?

[jmaximusix]

Yes, absolutely, you can do multiple different components. I should also note that the template html tag I nested (for better cohesion/readability) can technically be put anywhere in the html.
However I still consider this more of a workaround than a solution. It works fine, I added a few components in my project and it's still better than having to repeat the whole thing, but I wouldn't recommend doing something complicated with lot's of components and instances like that.
Would be awesome if it were properly supported tho!

[jikkuatwork]

True, I wish they supported it. I would have happily accepted the speed/size trade off for DX.

[jikkuatwork]

Also, can slot can have components with state/functions right?

I am having trouble wiring up components with state & function; if its not too much to ask, can you look at this Pen?

Will your solution be able to slot the Counter({ initialValue }) inside the Panel({ title }) while maintaining the individual state of the Counter?
Also, does your solution enable providing arguments for Counter & Panel while doing it?

[jikkuatwork]

Just got it working: petite-vue/component-nesting-example