Creating the footer component

The final component that we are going to use in our layout is the footer component. This will be displayed as the footer of our page:

1. Create a new file named Footer.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 FooterSection:

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

3. In the <template> section of the single file component, create a footer HTML element with the footer class, and then add a div HTML element with the content has-text-centered class:

<footer class="footer">
  <div class="content has-text-centered">
  </div>
</footer>

4. Inside the div.content HTML element, create a p HTML element for the initial footer line, and create a second p HTML element for the second line:

<p>
  <strong>Bulma</strong> by <a href...