eduproj/layouts/default.vue

<template>
  <div>
    <b-navbar class="is-dark" wrapper-class="container">
      <template #brand>
        <b-navbar-item tag="router-link" :to="{ path: '/' }">
          <img src="~assets/buefy.png" alt="Buefy" height="28" />
        </b-navbar-item>
      </template>
      <template #start>
        <b-navbar-item v-for="(item, key) of items" :key="key" :to="item.to">
          <b-icon :icon="item.icon" /> {{ item.title }}
        </b-navbar-item>
      </template>

      <template #end>
        <b-navbar-item tag="div">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light"> Log in </a>
          </div>
        </b-navbar-item>
      </template>
    </b-navbar>
    <section class="main-content columns">
      <aside class="column is-2 section">
        <p class="menu-label is-hidden-touch">General</p>
      </aside>

      <div class="container column is-10">
        <Nuxt />
      </div>
    </section>
  </div>
</template>

<script>
export default {
  "name": "DefaultLayout",
  data() {
    return {
      "items": [
        {
          "title": "Home",
          "icon": "home",
          "to": { "name": "index" },
        },
        {
          "title": "Inspire",
          "icon": "lightbulb",
          "to": { "name": "inspire" },
        },
      ],
    };
  },
};
</script>