What is a slot in Vue?

VueJunior~1 min read

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>

<script setup>
const user = { name: 'Tim', age: 28 }
</script>

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>

<style scoped>
.card {
  padding: 20px;
  background: white;
  border-radius: 8px;
}
</style>

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.

Short Answer

Interview ready

Premium

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