Slots let parents inject markup into a child’s template—Vue’s primary composition tool for layout shells, panels, and flexible wrappers without prop explosion.
Default slot
<Panel title="Notes">
<p>Any markup can go here.</p>
</Panel>
<!-- Inside Panel template -->
<section>
<h2>{{ title }}</h2>
<slot />
</section>Named slots
Use <slot name="header" /> and pass content with <template #header>...</template>. Named slots build toolbars, card headers, and modal footers cleanly.
Composition vs configuration
Prefer slots over dozens of boolean props like showFooter, footerText, footerIcon. Same guidance as React’s children prop—compose UI instead of configuring every branch.
Self-check
- What is the difference between a default slot and a named slot?
- When would you use a prop instead of a slot?