Slots — Let Parents Pass Markup

A component declares slot outlets and the parent fills them with arbitrary markup. It is how you build flexible wrappers like cards and modals.

4 min read Level 2/5 #vue#slots

What you'll learn

Define a default slot outlet
Use named slots
Provide fallback content

Slots are placeholders that a parent component fills with markup. They are the cleanest way to build wrapper components without hardcoding their content.

Default Slot

A child declares a slot outlet. Anything the parent puts between the component tags lands there.

<!-- Card.vue -->
<template>
  <div class="card">
    <slot />
  </div>
</template>

<!-- Parent -->
<Card>
  <h2>Hello</h2>
  <p>This goes inside the card.</p>
</Card>

Named Slots

When a component has multiple slot regions, give each one a name. In the parent, target them with a template tag and the #name shorthand.

<!-- Layout.vue -->
<template>
  <header><slot name="header" /></header>
  <main><slot /></main>
  <footer><slot name="footer" /></footer>
</template>

<Layout>
  <template #header><h1>Site</h1></template>
  <p>Main body content.</p>
  <template #footer><small>(c) 2026</small></template>
</Layout>

The unnamed content goes into the default slot.

Fallback Content

Put markup inside the slot tag to provide a default that renders when the parent passes nothing:

<button>
  <slot>Submit</slot>
</button>

Calling <MyButton /> renders “Submit”; calling <MyButton>Save</MyButton> overrides it.

Scoped Slots →