enfrancais-app/src/App.vue

<template>
  <div id="app">
    <header>
      <b-navbar toggleable="md">
        <b-navbar-brand :to="{ name: 'home' }">
          {{ $t('title') }}
        </b-navbar-brand>

        <b-navbar-toggle target="nav-collapse" />

        <b-collapse id="nav-collapse" is-nav>
          <b-navbar-nav class="ml-auto">
            <b-nav-item :to="{ name: 'library' }">
              {{ $t('sections.library') }}
            </b-nav-item>
            <b-nav-item :to="{ name: 'kit' }">
              {{ $t('sections.kit') }}
            </b-nav-item>
            <b-nav-item :to="{ name: 'gallery' }">
              {{ $t('sections.gallery') }}
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>

      <router-view name="options" />
    </header>

    <main id="main">
      <router-view />
    </main>
  </div>
</template>

<script>
export default {
  name: 'App',

  metaInfo () {
    return {
      // if no subcomponents specify a metaInfo.title, try to get one from the route name.
      title: this.$t('sections.' + this.$route.name, ''),
      // all titles will be injected into this template
      titleTemplate: '%s | ' + this.$t('title')
    }
  }
}
</script>

<style lang="scss">
@import '@/assets/scss/main.scss';
</style>