Suggest an edit

Improve this article

Refine the answer for “Can you use several slots in a single component?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

Yes, **you can use several slots in a single component** - it's standard practice in Vue.

For that you use **named slots**.

---

## How do several slots work?

In the child component, you declare several `<slot>` elements with the **name** attribute:

#### Child component (Card.vue)

```vue
<template>
  <div class="card">
    <header class="card-header">
      <slot name="header"></slot>
    </header>

<footer class="card-footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>
```

---

## The parent component can fill each slot

#### Parent

```vue
<Card>
  <template #header>
    <h2>Title</h2>
  </template>

<template #footer>
    <button>OK</button>
  </template>
</Card>
```

---

## The final result:

- `header` receives `<h2>Title</h2>`
- the default slot receives `<p>The card's main text...</p>`
- `footer` receives the button

---

## Yes, you can have as many slots as you want

- 2 slots
- 5 slots
- 10 slots

Vue doesn't limit the number; all that matters is:

- each named slot has a unique name
- the parent uses the matching `#slotName`

Markdown · drag & drop images · ⌘B / ⌘I shortcuts170 words

For the reviewer

Visible only to the moderator. Helps review go faster.