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. Insert content inside slot tag
Inside <slot> add any template elements — they will become fallback.
2. Don't declare empty slot
Don't write <slot></slot> without content — in this case there won't be fallback content.
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
Content
Default Slot with Fallback ContentNamed Slot with Fallback Content
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.