What Is a Slot in Vue?

In Vue, the "slot" concept distributes content between components. Slots are defined in a component's template and filled by the parent components that use it, which makes content integration between components more flexible and reusable.

The main features of Vue slots:

1. Default slots: if a component's template contains <slot></slot>, it is a place where the parent's content can go — the parent's content is placed where the slot tag is.
2. Named slots: naming slots allows more specific placement. With <slot name="header"></slot>, for example, the parent can provide content just for the header slot.
3. Scoped slots: this kind of slot lets the child pass data to the content the parent provides, enabling a more dynamic data flow.
4. Fallback content: you can define default content that is shown when the parent provides nothing for a slot.

Slots make components more flexible and reusable and usually lead to cleaner code — especially valuable in large, complex applications.

In the example below, the BaseCard component defines a named slot (header), a default slot and fallback content for both. The second card receives no content, so it shows the fallback texts:

<template>
  <base-card>
    <template #header>Card title</template>
    This text goes into the default slot.
  </base-card>
  <base-card />
</template>

<script>
const BaseCard = {
  template: `
    <div class="card">
      <h3><slot name="header">Default title</slot></h3>
      <p><slot>This fallback text appears when no content is given.</slot></p>
    </div>
  `,
};

export default {
  components: { BaseCard },
};
</script>

<style>
.card {
  margin-bottom: 12px;
  padding: 12px 16px;
  border: 1px solid #444;
  border-radius: 8px;
}
</style>