Vue.js 2 Design Patterns and Best Practices

Layouts

We can create custom layouts inside our Nuxt project. This allows us to change the way our pages are arranged and also allows us to add commonalities, such as static navigation bars and footers. Let's use Bulma to create a new navigation bar that allows us to navigate between multiple components within our site.

Inside the components folder, make a new file called NavigationBar.vue and give it the following markup:

<template>  <nav class="navbar is-primary" role="navigation" aria-label="main   navigation">    <div class="navbar-brand">      <nuxt-link class="navbar-item" to="/">Hearty Home Cooking</nuxt-      link>    </div>  </nav></template><script>export default {}</script>

We then need to add this to our default layout inside layouts/default.vue ...