Suggest an edit

Improve this article

Refine the answer for “What is a default slot?”. 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 default slot** is a component's main slot, used **when the slot has no name**.
This is the simplest and most commonly used type of slot in Vue.

In simpler terms:

> **A default slot is a place inside a child component where the parent can insert its main content.**

---

## What does a default slot look like?

### Child component:

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

### Parent:

```vue
<Card>
  <p>Text that will go into the default slot</p>
</Card>
```

Result:

```html
<div class="card">
  <p>Text that will go into the default slot</p>
</div>
```

---

## What is a default slot for?

- inserting the main content into a component
- making components flexible
- letting the parent control the content
- minimizing the number of props by passing HTML directly

---

## Example: a default slot for a modal

### Modal.vue:

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

### Usage:

```vue
<Modal>
  <h1>Title</h1>
  <p>Modal description</p>
  <button>Close</button>
</Modal>
```

---

## Features of the default slot

#### It cannot be given a name

It is always:

```html
<slot></slot>
```

or shorter:

```html
<slot />
```

#### It can be used together with named slots

Example:

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

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.