Creating the header menu component

In our design, we will have a header menu, with a basic combination of links and call-to-action buttons:

1. Create a new file named top-menu.vue in the src/components folder and open it.

2. In the <script> section of the single file component, we will export a default JavaScript object, with the name property defined as TopMenu:

<script>
export default {
  name: 'TopMenu',
};
</script>

3. In the <template> section of the single file component, create a section HTML element with the section class, and add a child div HTML element with the container class:

<section class="section">
  <div class="container">
  </div>
</section>

4. Now create a b-navbar component as a child of the div.container HTML element, and add as a child a template placeholder component, with the named slot as brand. Inside that, add a b-navbar-item component with the href attribute defined as # and add an img HTML element...