0Pricing
Vue Academy · Lesson

Slot Fallback Content and Checking Slots

Default slot content, useSlots() to check if slot is provided, conditional rendering.

Slot Fallback Content and Checking Slots is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Slot Fallback Content

A <slot> can contain default markup. If the parent provides content for that slot, the parent content wins; if not, the fallback inside the slot renders.

Defining a Fallback

Put the default content between the slot tags. It is a graceful default for optional slots.

<!-- Button.vue -->
<button>
  <slot>Submit</slot>
</button>

Fallback in Action

If the parent passes nothing, "Submit" shows. If the parent passes content, it overrides the fallback.

<Button />            <!-- shows: Submit -->
<Button>Save</Button> <!-- shows: Save -->

Named Slot Fallbacks

Named slots support fallbacks too. A header slot can default to a standard title when the parent omits it.

<header>
  <slot name="header">
    <h2>Default Title</h2>
  </slot>
</header>

The Problem of Empty Wrappers

Sometimes you want to render a wrapper element (like a footer container) only when the parent actually provides slot content. For that you must check whether a slot exists.

The useSlots Composable

In <script setup>, useSlots() returns an object whose keys are the provided slot names. Each value is a function that returns the slot vnodes.

import { useSlots } from "vue";
const slots = useSlots();

Checking a Slot Was Passed

Call the slot function and check for truthy content. slots.header exists only if the parent provided that slot; calling slots.header?.() safely returns its vnodes.

const hasHeader = computed(() => !!slots.header);

Conditionally Rendering the Wrapper

Use the check with v-if so the wrapper element appears only when there is content, avoiding empty DOM nodes.

<header v-if="slots.header">
  <slot name="header" />
</header>

Why Optional Chaining

slots.header?.() guards against the slot being undefined. Without the optional chain, calling an undefined slot throws. The pattern is common in render functions and computed checks.

const headerNodes = slots.header?.();
if (headerNodes) { /* render wrapper */ }

$slots in the Template

Templates expose the same data via $slots. You can check $slots.footer directly in a v-if without importing useSlots.

<footer v-if="$slots.footer">
  <slot name="footer" />
</footer>

Putting It Together

A robust card component renders each section only when its slot is supplied, keeping markup clean and styles predictable.

<div class="card">
  <header v-if="$slots.header"><slot name="header" /></header>
  <div class="body"><slot /></div>
  <footer v-if="$slots.footer"><slot name="footer" /></footer>
</div>

Quick Check

How do you check whether the parent provided a "header" slot in script setup?

Recap

You learned slots can hold fallback content that renders when the parent omits the slot. To conditionally render wrappers, check slot presence with useSlots() (slots.header?.()) in script setup or $slots.header in templates.

Frequently asked questions

Is the “Slot Fallback Content and Checking Slots” lesson free?

Yes — the full text of “Slot Fallback Content and Checking Slots” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Slot Fallback Content and Checking Slots”?

Default slot content, useSlots() to check if slot is provided, conditional rendering. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Slot Fallback Content and Checking Slots” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Named Slots and Default Slot
  2. Scoped Slots: Passing Data to Parent
  3. Dynamic Slot Names
  4. Slot Fallback Content and Checking Slots
← Back to Vue Academy