How to use named slots in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using named slots in Vue enables flexible component composition by providing multiple designated content areas, allowing parent components to inject content into specific locations within child templates. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented named slots in countless Vue components for card layouts, modal dialogs, and dashboard widgets where flexible content placement is essential. From my expertise, the most effective approach is defining named slots with template v-slot directive and fallback content for optional slots. This method provides powerful component composition with clean content distribution and reusable template structures.
Define named slots in child components and use template v-slot in parent components to target specific content areas.
<!-- Child Component: BaseCard.vue -->
<template>
<div class="card">
<header class="card-header">
<slot name="header">
<h3>Default Header</h3>
</slot>
</header>
<main class="card-body">
<slot name="content">
<p>Default content goes here</p>
</slot>
</main>
<footer class="card-footer">
<slot name="footer">
<button>Default Action</button>
</slot>
</footer>
</div>
</template>
<!-- Parent Component -->
<template>
<div>
<BaseCard>
<template v-slot:header>
<h2>User Profile</h2>
<span class="badge">Premium</span>
</template>
<template v-slot:content>
<img src="/avatar.jpg" alt="User Avatar">
<p>John Doe - Software Developer</p>
<p>Member since 2020</p>
</template>
<template v-slot:footer>
<button class="btn-primary">Edit Profile</button>
<button class="btn-secondary">View Details</button>
</template>
</BaseCard>
</div>
</template>
<script setup>
import BaseCard from './components/BaseCard.vue'
</script>
Named slots are defined with <slot name="slotName"> in child components, with optional fallback content. Parent components use <template v-slot:slotName> or the shorthand <template #slotName> to target specific slots. This creates flexible, reusable components with multiple content insertion points.
Best Practice Note:
This is the same named slot architecture we use in CoreUI Vue components for flexible layout components like cards, modals, and dashboard widgets.
