Conditional Rendering in Named Slots

Illustrates how to conditionally render content within named slots based on certain data properties or computed values.
  .content-container {
    display: block;
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 10px;

<template id="conditional-slot-template">
    <slot name="header"></slot>
    <slot name="main"></slot>
    <!-- Only render this slot if footerVisible is true -->
    <div class="content-container" v-if="footerVisible">
      <slot name="footer"></slot>
Load this HTML segment which includes a template with named slots for 'header', 'main', and 'footer'. The 'footer' slot will be conditionally rendered based on a property named 'footerVisible'.
<div id="app">
    <template v-slot:header>
      <h1>This is the header</h1>
    <template v-slot:main>
      <p>This is the main content</p>
    <!-- This will render only if 'footerVisible' in the component state is true -->
    <template v-slot:footer>
      <p>This content appears in the footer</p>
This HTML section uses the Vue components to define placeholders for the header, main, and footer. The 'footer' content will conditionally display based on 'footerVisible'.
Vue.component('conditional-slot', {
  template: '#conditional-slot-template',
  data() {
    return {
      footerVisible: false // Change this to true to show the footer slot

new Vue({
  el: '#app'
This JavaScript defines a Vue component called 'conditional-slot' using the template from earlier. It has a 'data' property called 'footerVisible' that controls the visibility of the footer slot.