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

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>

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