To create the layout component, we are going to use all the created components and add a slot that will hold the page content:
- In the src/components folder, create a new file named Layout.vue and open it.
- In the <script> section of the single file component, import the top-bar component and the drawer-menu component:
import TopBar from './TopBar.vue';
import DrawerMenu from './DrawerMenu.vue';
- Then, we will export a default JavaScript object, with the name property defined as Layout, then create the components property with the imported components. Finally, add the data property as a singleton function returning a JavaScript object, with the drawer property with the value defined as false:
export default {
name: 'Layout',
components: {
DrawerMenu,
TopBar,
},
data: () => ({
drawer: false,
}),
};
- Inside the <template> section, create a v-app component. As the first child, add the top-bar component...