Vue official way of implementing Fallthrough Slots, extending components #11004

camiloforero · 2024-05-23T15:18:53Z

camiloforero
May 23, 2024

There is already a feature request in #575 that talks about how could fallthrough slots be implemented, similarly to fallthrough props and events.

However, in that thread, a very nice snippet (edited, thanks @jimp100) :

<template v-for="(_, name) in $slots" #[name]="scope">
  <slot :name v-bind="scope ?? {}"/>
</template>

was provided. To me it looks like the best currently known way to accomplish this, and I created a snippet that showcases how it works.

The two things I want to discuss here are:

Would it be a good idea to add this snippet to the slots documentation, as a new "Fallthrough Slots" section? I can write that PR and redact the documentation, as soon as I'm greenlighted.
As a more open discussion, I got into this because I was looking for the best vue way to extend library components with new functionality while keeping all of the default functionality. However, I spent some time looking for ways to extend components, and reached a few dead ends before zeroing on this solution (declare the component I want to extend as the root node of my own wrapper component, take advantage of fallthrough props and events, and use this snippet for slots). Would it help to make this a new section under the docs "Reusability" section?

jimp100 · 2024-08-02T13:55:30Z

Thanks, your code snippet was super helpful. I had to make a small modification for my particular implementation, thought I'd share it.

<template v-for="(_, name) in $slots" #[name]="scope">
  <slot :name v-bind="scope ?? {}" />
</template>

I added the nullish coalescing operator (??) on the slot v-bind, as I was seeing TypeError: props is null errors in some usages.

1 reply

On typescript, all the slot props lose their types and become any