Javascript is required
Weekly Vue News Logo Weekly Vue News

Document is empty, overwrite this content with #empty slot in <ContentDoc>.

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

Migrated Issue
Expect missing links and broken styling, as this issue has been migrated from my previous newsletter service.

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:

  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 #="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

📕 Async with Suspense

👉🏻 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.

🛠️ Colada

👉🏻 Time-travel debugging for Pinia🍍, Vue’s official state management library

📆 ViteConf

👉🏻 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

🛠️ Nightdrive

👉🏻 James made a beautiful & relaxing JavaScript simulation of driving at night time on the motorway.

Quote of the Week

Weekly Vue News LogoWeekly newsletter that gives you high-quality tips and curated content about Vue & Nuxt.
I will never share any of your personal data.
© 2023 weekly-vue.news. All rights reserved.