What is a slot in Vue?

VueJunior~1 min read

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> <!-- default -->
<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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.