Sub Layouts with Vue

ASubLayout.vue

<template>
  <!-- this layout will not have any header or general things to all layouts -->
  <div>
    <h2> i'm a sub layout </h2>
    <slot />
  </div>
</template>

LayoutA.vue

<template>
  <div>
    <the-header />
    <h1> i'm layout A </h1>

    <!-- let's use the sub layout -->
    <a-sub-layout>
      <slot />
      <!-- here we are doing slot transfer, the main component will appear within the sub layout -->
     </a-sub-layout>

     <!-- here we have a footer -->
     <the-footer />
   </div>
<template>

LayoutB.vue

<template>
  <div>
    <the-header />
    <h1> i'm layout B</h1>

    <aside> i'm a side bar</aside>

    <slot />
    <!-- no sub layout -->
    <!-- the main compoent will apppear hear as a slot -->

    </the-footer />
   </div>
 </template>

LayoutC.vue

<template>
  <div>
    <the-header />
    <h1> i'm layout C </h1>

    <!-- let's use the sub layout -->
    <a-sub-layout>
      <slot />
      <!-- here we are doing slot transfer, the main component will appear within the sub layout -->
     </a-sub-layout>

     <!-- no footer here -->
   </div>
<template>

router.js

// as you will notice
// we never use a sub layout directly
// sub layouts are only used to contain common markup for main layouts

new VueRouter({
  routes: [
    {
      name: 'home',
      path: '/',
      meta: {layout: 'LayoutA' },
      component: require('@/pages/Home.vue').default // load sync mode 
    },
    {
      name: 'some-random-page',
      path: '/bla1',
      meta: {layout: 'LayoutC' },
      component: () => import('@/pages/Random1.vue')
    },
    {
      name: 'some-random-page-2',
      path: '/bla2',
      meta: {layout: 'LayoutB' },
      component: () => import('@/pages/Random2.vue')
    }
  ]
})

TheFooter.vue

<template>
  <footer> hey i'm the footer </footer>
</template>

TheHeader.vue

<template>
  <header> hey i'm the header </header>
</template>