Vue Tip: Expose Slots From a Child Component

Third-party components are often wrapped in a custom component. But in that way, the slots of the third-party component get lost.

The following solution exposes all slots of the third-party component to the parent component:

<template>
  <div class="wrapper">
    <ThirdPartyComponent v-bind="$attrs">
      <!-- Expose all slots of the third-party component -->
      <template v-for="(_, name) in $slots" #[name]="slotProps">
        <slot :name="name" v-bind="slotProps || {}"></slot>
      </template>
    </ThirdPartyComponent>
  </div>
</template>

Now every component that uses WrapperComponent can use the slots of ThirdPartyComponent.

What's happening:

1. We insert the third-party component and bind its attributes via the $attrs component instance object (official docs)
2. We loop over all available slots using the $slots component instance object (official docs) and bind the slots props to the slot name via #[name]="slotProps"
3. In the slot, we use v-bind to bind all third-party slot properties (slotProps) to pass out to a parent