View profile

Weekly Vue News - #61 - Expose slots from 3rd-party child component

Michael Hoffmann
Michael Hoffmann
Hi 👋
CodeSnap is officially live 🚀.
Use code “CODESNAP_50” to get 50% off the “Pro” plan for the first year.
This week I’ll also attend the vuejs.de Conf in Berlin. Leave me a message if you will also be there.
Have a great week ☀️

Vue Tip: Expose slots from 3rd-party 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:
Image created with CodeSnap.dev
Image created with CodeSnap.dev
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
Curated Vue Content
JavaScript Tip: Remove falsy values from array
.filter(Boolean) removes the following values from an array:
  • null
  • undefined
  • NaN
  • false
  • 0
  • “” (empty string)
Image created with CodeSnap.dev
Image created with CodeSnap.dev
Curated Web Development Content
Quote of the Week
Did you enjoy this issue? Yes No
Michael Hoffmann
Michael Hoffmann @mokkapps

This weekly Vue newsletter gives you high-quality tips and curated content to help you become a Vue.js expert.

Additionally, it provides content about web development topics like TypeScript, JavaScript, HTML5, and CSS3.

Published each Monday since June 2021.

In order to unsubscribe, click here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter.
Holzapfelkreuther Straße 19, 81375 Munich, Germany