Creating the layout component

To create the layout component, we are going to use all the created components, and add a slot that will hold the page content:

1. Create a new folder called layouts in the src folder, and create a new file named Main.vue and open it.
2. In the <script> section of the single file component, import the footer-section component and the top-menu component:

import FooterSection from '../components/Footer.vue';
import TopMenu from '../components/top-menu.vue';

3. Then, we will export a default JavaScript object, with the name property defined as Mainlayout, and define the components property with the imported components:

export default {
  name: 'Mainlayout',
  components: {
    TopMenu,
    FooterSection,
  },
};

4. Finally, in the <template> section of the single file component, create a div HTML element with the child top-menu component, a slot placeholder, and the footer-section component:

<template>
  <div>
    <top...