JAVASCRIPT
Creating a Dynamic Header Component with Slots
Build a flexible and reusable header component in Vue 3 using named slots to inject dynamic content like titles, navigation, or action buttons.
// components/AppHeader.vue
<template>
<header class="app-header">
<div class="header-left">
<slot name="left">
<!-- Default content for 'left' slot -->
<button>Menu</button>
</slot>
</div>
<div class="header-center">
<slot>
<!-- Default content for default slot (title) -->
<h1>My Application</h1>
</slot>
</div>
<div class="header-right">
<slot name="right">
<!-- Default content for 'right' slot -->
<button>Login</button>
</slot>
</div>
</header>
</template>
<style scoped>
.app-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 20px;
background-color: #333;
color: white;
border-bottom: 1px solid #555;
}
.header-left, .header-center, .header-right {
display: flex;
align-items: center;
gap: 10px;
}
h1 {
margin: 0;
font-size: 1.5em;
}
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
// App.vue (Parent component using AppHeader)
<template>
<div>
<AppHeader>
<!-- Content for 'left' slot -->
<template #left>
<img src="https://via.placeholder.com/30" alt="Logo" />
<router-link to="/">Home</router-link>
</template>
<!-- Content for default slot -->
<template #default>
<h2>Welcome to Dashboard</h2>
</template>
<!-- Content for 'right' slot -->
<template #right>
<input type="search" placeholder="Search..." />
<button>Settings</button>
<span>{{ username }}</span>
</template>
</AppHeader>
<main style="padding: 20px;">
<!-- Main content of the app -->
<p>This is the main content area.</p>
</main>
</div>
</template>
<script setup>
import { ref } from 'vue';
import AppHeader from './components/AppHeader.vue';
const username = ref('John Doe');
</script>
How it works: This snippet demonstrates creating a highly flexible `AppHeader` component using Vue 3's named slots. The `AppHeader.vue` component defines three slots: `left`, `default` (unnamed), and `right`, each with optional fallback content. This structure allows the parent component (`App.vue`) to inject entirely custom content into different regions of the header. For example, the `left` slot receives an image and a router link, the `default` slot gets a custom title, and the `right` slot includes a search input, a button, and dynamic text. This pattern promotes reusability and maintainability by separating the header's layout from its dynamic content.