Weekly Vue News - #61 - Expose slots from 3rd-party child component
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
Now every component that uses WrapperComponent can use the slots of ThirdPartyComponent.
What's happening:
- 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#="slotProps" - In the
slot, we usev-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
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
Curated Web Development Content
๐ The new wave of Javascript web frameworks
๐๐ป This article presents a high-level model of popular frameworks like React, Vue, Svelte, Next, and more.
๐๐ป It looks at JavaScript's past pain points to understand the problems these frameworks solve.
๐ 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
๐๐ป James made a beautiful & relaxing JavaScript simulation of driving at night time on the motorway.
Quote of the Week
