0Pricing
Vue Academy · Lesson

Slots and Scoped Slots

Compose flexible components using slots and scoped slots.

What Are Slots?

Slots let a parent inject content into a child component template.

  • Props pass data; slots pass markup
  • Great for layout wrappers, cards, modals
  • The child decides where the content goes

The Default Slot

A child defines a placeholder with the slot element. Whatever the parent puts inside the tags fills it.

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

All lessons in this course

  1. Creating and Registering Components
  2. Props and Custom Events
  3. Slots and Scoped Slots
← Back to Vue Academy