Hack Frontend Community

How to Add Fallback Content for Slots in Vue?

Fallback content for slots is default content shown inside <slot> if parent didn't pass custom content for this slot.

Default Slot with Fallback Content

<!-- ChildComponent.vue -->
<template>
  <div class="card">
    <slot>
      <!-- This block will display if Parent didn't pass content -->
      <p>Default text for slot will be here.</p>
    </slot>
  </div>
</template>

<!-- Parent.vue -->
<template>
  <!-- without nested content -->
  <ChildComponent />
</template>

Note:

Since <ChildComponent> has <p>…</p> inside <slot>, it will display when user content is absent.

Named Slot with Fallback Content

<!-- Layout.vue -->
<template>
  <header>
    <slot name="header">
      <!-- fallback for header -->
      <h1>Default Header</h1>
    </slot>
  </header>
  <main>
    <slot>
      <!-- fallback for main content -->
      <p>Default main content</p>
    </slot>
  </main>
</template>

<!-- Parent.vue -->
<template>
  <Layout>
    <!-- only footer is passed -->
    <template #footer>
      <p>© 2025</p>
    </template>
  </Layout>
</template>

Note:

If you didn't specify <template #header>, you'll see <h1>Default Header</h1> instead of header.

Steps for Adding Fallback Content

1

1. Insert content inside slot tag

Inside <slot> add any template elements — they will become fallback.

2

2. Don't declare empty slot

Don't write <slot></slot> without content — in this case there won't be fallback content.

3

3. Use named slots as needed

For each <slot name="..."> you can separately specify fallback inside tag.

Note:

Fallback content displays only when content for slot is completely absent. If empty HTML is passed (e.g., <template #default></template>), Vue considers slot filled and fallback content won't appear.

For details see official Vue documentation: Default content for slots