Dynamic Component with Named Slots

Shows how to use the <component> tag with named slots to dynamically switch between different components passed as slot content.
<template id="header-component">
    <slot name="logo"></slot>
      <slot name="navigation"></slot>

<template id="footer-component">
    <slot name="info"></slot>
HTML templates for header and footer components with named slots.
<div id="app">
  <component is="currentComponent">
    <!-- Named slot for the logo -->
    <img slot="logo" src="logo.png" alt="Logo">

    <!-- Named slot for navigation -->
    <ul slot="navigation">

    <!-- Named slot for footer info -->
    <p slot="info">&copy; 2023 Company Name</p>
HTML structure where the <component> tag is used to dynamically switch between the header and footer components with named slot content.
const app = new Vue({
  el: '#app',
  data: {
    currentComponent: 'header-component'
Vue instance binding the #app element and setting the initial component to 'header-component'.
header, footer {
  background-color: #e0e0e0;
  padding: 1rem;
  text-align: center;

nav ul {
  list-style-type: none;
  padding: 0;

nav li {
  display: inline;
  margin-right: 1rem;
CSS styles for the header, footer, and navigation elements.