Javascript is required
Mokkapps Logo

Vue Tip: Expose Slots From a Child Component

Michael Hoffmann (Mokkapps) - Senior Frontend Developer (Freelancer)
Oct 1, 2022
1 min read
|
64 views
Template
Slots
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
<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

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.