Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Vue Tip: Expose Slots From a Child Component

Vue Tip: Expose Slots From a Child Component Image
TemplateSlots

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 X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Lifecycle Hooks for Debugging

Vue provides two lifecycle hooks that we can use for debugging purposes.

Vue Tip: Expose Properties in a Script Setup Component

Components using script setup are closed by default and will not expose any of the bindings declared inside script setup.