Vue Tip: Passing Slots to Child Components

In certain scenarios, you want to pass on all slots from a parent component to the child component. This is especially useful when creating a wrapper component that adds some functionality to the child component.

In this article, let's assume we have a Child.vue component with two named slots, top and bottom:

Child.vue

<template> <div> <h2>Child</h2> <slot name="top" /> <slot name="bottom" /> </div> </template>

Child.vue is wrapped by the Parent.vue component that should pass all slots to its child component. First, let's see how the named slots are filled in the App.vue component:

App.vue

<template> <Parent> <template #top> <span>Top</span> </template> <template #bottom> <span>Bottom</span> </template> </Parent> </template>

Finally, let's see how the Parent.vue component passes all slots to its child component:

Parent.vue

<template> <div> <h1>Parent</h1> <Child> <template v-for="(_, slotName) in $slots" #[slotName]> <slot :name="slotName" /> </template> </Child> </div> </template>

We iterate over the $slots object and render a slot element for each slot. The slot element has a :name attribute that is bound to the slotName variable.

StackBlitz

Try it out on StackBlitz:

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:

Nuxt Tip: Cancel Fetch API Request

In Nuxt 3, you can use the `signal` parameter with the globally available `$fetch` helper to cancel an API request.

Vue Tip: Trigger Transition Programmatically

You can programmatically trigger a transition via the "key" attribute.