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:

1<template>
2  <div class="wrapper">
3    <ThirdPartyComponent v-bind="$attrs">
4      <!-- Expose all slots of the third-party component -->
5      <template v-for="(_, name) in $slots" #[name]="slotProps">
6        <slot :name="name" v-bind="slotProps || {}"></slot>
7      </template>
8    </ThirdPartyComponent>
9  </div>
10</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