Why Named slots and scoped slots in Vue? - Purpose & Use Cases

The Big Idea

Discover how to make your Vue components truly flexible and dynamic with named and scoped slots!

The Scenario

Imagine building a reusable card component where you want to put different content in the header, body, and footer. You try to hardcode everything inside the card, but then every time you want a different header or footer, you have to rewrite or copy the whole card.

The Problem

Manually changing parts of a component means repeating code or making many versions. It's hard to keep track, easy to make mistakes, and wastes time. You lose flexibility and your code becomes messy and hard to maintain.

The Solution

Named slots let you define multiple placeholders inside a component, so you can fill each part separately. Scoped slots let you pass data from the component to the slot content, making it dynamic and customizable without rewriting the component.

Before vs After

✗ Before

<Card>
  <h1>Title</h1>
  <p>Body text</p>
  <button>Click</button>
</Card>

✓ After

<Card>
  <template #header><h1>Title</h1></template>
  <template #body><p>Body text</p></template>
  <template #footer><button>Click</button></template>
</Card>

What It Enables

You can build flexible, reusable components that let users customize each part easily and even get data from the component to show dynamic content.

Real Life Example

A modal dialog component where you can set a custom title, body message, and buttons, and the buttons can know if the modal is loading or disabled through scoped slots.

Key Takeaways

Named slots let you define multiple customizable areas inside a component.

Scoped slots pass data from the component to the slot content for dynamic rendering.

They make components flexible, reusable, and easier to maintain.