Weekly Vue News - #61 - Expose slots from 3rd-party child component
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
Now every component that uses
WrapperComponent can use the slots of
- We insert the third-party component and bind its attributes via the
$attrscomponent instance object (official docs)
- We loop over all available slots using the
$slotscomponent instance object (official docs) and bind the slots props to the slot name via
- In the
slot, we use
v-bindto bind all third-party slot properties (
slotProps) to pass out to a parent
Curated Vue Content
👉🏻 Learn all about Vue 3’s new component called
📕 Testing Pinia Data Stores in Vue
👉🏻 Patrick describes how to test Pinia data stores in Vue applications.
👉🏻 Time-travel debugging for Pinia🍍, Vue’s official state management library
👉🏻 The first-ever ViteConf is happening for free online on October 11-12 with a speaker lineup that’s full of bangers
.filter(Boolean) removes the following values from an array:
- “” (empty string)
Curated Web Development Content
👉🏻 This article presents a high-level model of popular frameworks like React, Vue, Svelte, Next, and more.
📕 My Blog is Hilariously Overengineered To The Point People Think It's A Static Site
👉🏻 "I'm going to share the gory details on how my blog works, and why people often mistake it for a static website."
😮 Doom3 is running in the browser
👉🏻 An experimental port of id Tech 4 engine to Emscripten / WebAssembly