Suggest an edit

Improve this article

Refine the answer for “What is a slot in Vue?”. 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)

**A slot in Vue** is a mechanism that lets you **pass markup (HTML/template)** from the parent component into the child component.

Put simply:

> **A slot is a "hole" inside a component where the parent can insert its own content.**

This makes components flexible, reusable, and configurable.

---

## Simple slot example

### Child component (Card.vue)

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

### Parent component

```vue
<Card>
  <p>Hello, I'm text inside the slot!</p>
</Card>
```

The result:

```
<div class="card">
  <p>Hello, I'm text inside the slot!</p>
</div>
```

The Card component just provides a "container", and the parent decides what to put inside it.

---

## Why are slots needed?

#### To make components flexible

For example, a `<Modal>` component may not know in advance what content will be inside it.

#### To pass HTML, not just data

Props pass data.
Slots pass **template and structure**.

#### To make components fully reusable

For example, a button with an icon, a card, a layout.

---

## Types of slots

Vue supports **three types of slots**.

---

## 1. **Default slot**

```vue
<slot></slot>
```

---

## 2. **Named slots**

Let you have several zones for inserting content.

#### Child:

```vue
<slot name="header"></slot>
<slot></slot> 
<slot name="footer"></slot>
```

#### Parent:

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

Main text

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

---

## 3. **Scoped slots (slots with data)**

Let you pass *data from the child to the parent* through the slot.

#### Child:

```vue
<slot :user="user"></slot>
```

#### Parent:

```vue
<Child v-slot="{ user }">
  <p>{{ user.name }}</p>
</Child>
```

---

## Difference between slots and props

| Props | Slots |
|---|---|
| pass data | pass **markup** |
| the parent passes a value | the parent passes HTML/components |
| static structure | flexible structure |
| the component knows where to place the data | the component does not know what will be inside |

---

## Summary (great for interviews)

> **A slot in Vue is a special place in the component where you can insert custom content from the parent.**
> **Slots make a component flexible and let you reuse markup.**
> **There are default, named, and scoped slots.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.