Creating the layout component

Here, we will create the layout component. This component will join together the top-bar component and the Drawer menu component to make a wrapper for the user registration page:

1. In the src/components folder, create a new file named Layout.vue and open it.

2. 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 Drawer from './Drawer.vue';

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

export default {
  name: 'layout',
  components: {
    Drawer,
    TopBar,
  },
};

4. In the <template> section of the single file component, create an a-layout component with the style attribute defined as min-height: 100vh. Then, add the Drawer component as a child. As a sibling of the drawer component, create an a-layout component...