How to pass slots through from Parent to Child Components with PrimeVue?

I am trying to wrap some PrimeVue components to make my own component library. But how do I handle all the slots?

Some PrimeVue components have a large number of slots so passing each one individually would be a massive pain.

Fortunately, I found this solution to pass all slots from Parent to Child Component.

Here is an example in use with the PrimeVue Dropdown component:

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

Unfortunately, it doesn't work with PrimeVue because TypeScript it gives this error on #[name] regarding no index signature on DropdownSlots:

Element implicitly has an 'any' type because expression of type 'string | number' can't be used to index type 'DropdownSlots'.

No index signature with a parameter of type 'string' was found on type 'DropdownSlots'. ts(7053)

Any ideas for a workaround?

Solution

I found this fantastic package called Vue Forward Slots to solve all these issues related to forwarding slots: https://www.npmjs.com/package/vue-forward-slots

I am using it like this to forward all slots (including the default slot):

  <ForwardSlots :exclude="[]">
    <Dropdown v-bind="$attrs" />
  </ForwardSlots>

I hope someday something like this makes it's way into core vue.js.