Why Slots for content distribution in Vue? - Purpose & Use Cases

The Big Idea

Discover how slots can save you from endless copy-pasting and make your components truly reusable!

The Scenario

Imagine building a webpage where you want to reuse a card component but show different titles and images inside it each time.

You try to copy and paste the card code and change the content manually every time.

The Problem

Manually copying and changing code is slow and causes mistakes.

If you want to update the card style, you must change every copy separately.

This wastes time and can break your page easily.

The Solution

Slots let you create one flexible component that acts like a container.

You can put different content inside it each time you use it, without changing the component itself.

This keeps your code clean and easy to update.

Before vs After

✗ Before

<div class="card">
  <h1>Title 1</h1>
  <img src="img1.jpg" />
</div>

<div class="card">
  <h1>Title 2</h1>
  <img src="img2.jpg" />
</div>

✓ After

<Card>
  <template #header><h1>Title 1</h1></template>
  <template #image><img src="img1.jpg" /></template>
</Card>

<Card>
  <template #header><h1>Title 2</h1></template>
  <template #image><img src="img2.jpg" /></template>
</Card>

What It Enables

Slots enable you to build reusable components that adapt to different content easily and keep your app organized.

Real Life Example

Think of a blog site where the same post layout is used, but each post shows different titles, images, and text inside the same card component.

Key Takeaways

Manual content changes cause repeated code and errors.

Slots let you insert different content into one reusable component.

This makes your code cleaner, easier to maintain, and more flexible.