Javascript is required
Michael Hoffmann LogoMichael Hoffmann

Vue Tip: Expose Slots From a Child Component

Michael Hoffmann - Senior Frontend Developer (Freelancer)
Michael Hoffmann
Oct 1, 2022
1 min read
|
1784 views
Template
Slots
Vue Tip: Expose Slots From a Child Component  Image

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:

WrapperComponent.vue
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

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue newsletter:

New Vue & Nuxt tips delivered to your inbox:
I will never share any of your personal data.