What is a Slot in Vue.js?

VueMiddle~1 min read

A slot is a mechanism for passing content from a parent component into a child. It lets you make components flexible and reusable by letting the parent insert its own markup inside the child component.

1. Example: basic slot

Child component (`BaseCard.vue`)

javascript

<template>
  <div class="card">
    <slot></slot> <!-- place for content -->
  </div>
</template>

<style scoped>
.card {
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 6px;
}
</style>

Parent component

javascript

<template>
  <BaseCard>
    <h2>Card title</h2>
    <p>Card content.</p>
  </BaseCard>
</template>

<script setup>
import BaseCard from './BaseCard.vue'
</script>

Everything inside <BaseCard>...</BaseCard> gets inserted where the child component placed <slot>.

2. Named slots

Sometimes you need several different insertion zones (for example, a header and content). In that case slots can be named using name.

Child component:

javascript

<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

Parent:

javascript

<BaseCard>
  <template #header>
    <h2>Title</h2>
  </template>

  <p>Main card content</p>

  <template #footer>
    <small>Card footer</small>
  </template>
</BaseCard>

<slot></slot> with no name is the default slot
<slot name="..."> is a named slot
The parent uses the #name syntax (or v-slot:name)

3. Slot with data (scoped slot)

Sometimes the child component wants to pass data back to the parent through the slot. For this, a slot can carry a "scope" - special variables.

Child component:

javascript

<template>
  <ul>
    <slot v-for="item in items" :item="item" :key="item.id"></slot>
  </ul>
</template>

<script setup>
defineProps({ items: Array })
</script>

Parent:

javascript

<ItemList :items="users">
  <template #default="{ item }">
    <li>{{ item.name }} - {{ item.email }}</li>
  </template>
</ItemList>

<script setup>
const users = [
  { id: 1, name: 'Oleh', email: 'oleh@example.com' },
  { id: 2, name: 'Bohdan', email: 'bohdan@example.com' }
]
</script>

The child component "exports" data (:item="item")
The parent "destructures" it via { item } This is called a scoped slot (a slot with a scope).

4. Why slots are needed

They make components flexible and universal
They let you insert custom HTML into a component's template
They support dynamic and reactive data
They simplify building UI components (layout, modal, card, table, etc.)

javascript

<!-- Modal.vue -->
<template>
  <div v-if="open" class="modal">
    <div class="content">
      <slot name="header"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script setup>
defineProps({ open: Boolean })
</script>

javascript

<!-- Parent component -->
<Modal :open="true">
  <template #header><h2>Confirmation</h2></template>
  <p>Are you sure you want to delete this?</p>
  <template #footer>
    <button>Cancel</button>
    <button>OK</button>
  </template>
</Modal>

Summary

A slot is a placeholder in a component's template where the parent can insert its own content.

There are three types:

Default - <slot></slot>

Named - <slot name="header">

Scoped - <slot :data="...">

Short Answer

Interview ready

Premium

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