Using Layouts

There are many ways to implement layouts in a Vue.js application. One of them is using slot and creating a static wrapper layout component on top of router-view. Despite its flexibility, this approach results in a heavy performance cost, both in the unnecessary re-creation of the component and in the extra data-fetching required on every route change.

In this section, we will discuss a better approach, which is to take advantage of the power of the dynamic component. The components are as follows:

<component :is="layout"/>

In the App.vue file, we will change the default view generated by Vue CLI to only <router-view> and a wrapper around it. This wrapper is a dynamic component that will render whatever component is defined in the layout variable:

<template>
  <div id="app">
    <component :is="layout">
      <router-view/>
 &...