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 **inner content** (HTML or other components) from a parent into a child component.

In simpler terms:
**A slot is a "place inside a component" where a parent can insert its own markup.**

Slots make components flexible and reusable.

---

## A simple slot example

#### The `Card.vue` component:

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

#### Usage:

```javascript
<Card>
  <h1>Hello Vue</h1>
  <p>This is card content</p>
</Card>
```

Result: the component **wraps** the passed-in markup.

---

## Why do we need slots?

- the markup inside a component can vary
- the component becomes universal
- you can build flexible UI wrappers: Card, Modal, Layout, Table, Tabs
- this is the basis for advanced component patterns

---

## Types of slots

### 1) Regular slot (default slot)

```javascript
<slot></slot>
```

Used when a component just has one place for content.

---

### 2) **Named slots**

Used when you need several different areas inside a component.

#### The `Modal.vue` component:

```javascript
<template>
  <div class="modal">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>
```

#### Usage:

```javascript
<Modal>
  <template #header>
    <h1>Title</h1>
  </template>

Modal content

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

---

### 3) **Scoped slots**

These are slots that **receive data from the child component**.

#### Child component:

```javascript
<template>
  <slot :user="user"></slot>
</template>

#### Parent:

```javascript
<MyComponent>
  <template #default="{ user }">
    <p>{{ user.name }} - {{ user.age }}</p>
  </template>
</MyComponent>
```

This is a very powerful tool for tables, lists, forms, and UI patterns.

---

## What can you pass into a slot?

- HTML
- text
- any Vue components
- complex templates
- reactive data (in scoped slots)

---

## Where are slots commonly used?

- Layout (`<Header /><Sidebar />`)
- Cards (`<Card>...</Card>`)
- Modals
- Tables, lists
- Wrapper components
- Dropdown lists
- Dropdown/Popover/Menu
- Tabs
- Form builder - dynamic forms

---

## A real Card component example with a slot

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

Usage:

```javascript
<Card>
  <h2>Product Name</h2>
  <p>Description...</p>
</Card>
```

---

## Summary (cheat sheet)

**A slot is a place in a component where a parent can pass its own markup.**

Types of slots:

- Regular
- Named
- Scoped (a slot with data)

Slots let you build flexible, reusable components and implement complex UI patterns.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.