Using layouts

There are many ways to implement layouts in a Vue application. One of them is using a slot and creating a static wrapper layout component on top of RouterView. Despite its flexibility, this approach results in a heavy performance cost, both in terms of the unnecessary recreation of the component and in the extra data fetching required for 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"/>

Let’s create an src/layouts folder with a default layout component. This component has a simple header navigation, a main slot to render the actual content (which is whatever <RouterView> renders), and a footer:

<template>
  <div class="default">
    <nav>
      <RouterLink to="/">Home</RouterLink...