Skip to content

Vue Slots

Slots let parents pass template content into child components. This lesson covers practical patterns, syntax, and mistakes to avoid.

Content Distribution with Slots

Slots let parents pass template content into child components.

Named and scoped slots enable flexible layout APIs.

<!-- Child -->
<slot />
<slot name="footer" />
<!-- Parent -->
<Child>
  <p>Body</p>
  <template #footer>Bye</template>
</Child>

Default + named slots.

Scoped Slots

Child passes data into slot props for parent rendering.
  • Prefer Vue 3 + Composition API.
  • Use script setup for SFCs.
  • Keep components focused.
  • Lean on official docs.

Vue Slots Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
default slot Body
named #name Regions
scoped slot props Data
fallback slot content Default UI
dynamic name Advanced
renderless scoped only Pattern

Prefer Slots Over HTML Props

Passing large HTML strings as props is usually wrong.

Common Mistakes

  • Deeply nested slot soup.
  • Forgetting fallback content for optional slots.

Key Takeaways

  • VueSlots / Slots is a core Vue skill.
  • Practice in a Vite app.
  • Prefer clarity.
  • Revisit docs for edge cases.

Pro Tip

Headless list components often expose scoped slots for row rendering.

You now understand vue slots. Next, continue with Dynamic Components to keep building your Vue skills.