enfrancais-app/src/App.vue

<template>
  <div id="app">
    <header>
      <b-navbar>
        <b-dropdown variant="link" no-caret>
          <template #button-content>
            <span class="navbar-toggler-icon" />
            <span class="sr-only">Menu</span>
          </template>

          <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
            {{ $t('sections.' + name) }}
          </b-dropdown-item>
        </b-dropdown>

        <b-navbar-brand :to="{ name: 'home' }">
          {{ $t('title') }}
        </b-navbar-brand>

        <b-nav class="ml-auto" pills>
          <b-nav-item
            v-for="name in mainRoutes" :key="name"
            :to="{ name }" :active="$route.name === name"
          >
            {{ $t('sections.' + name) }}
          </b-nav-item>
        </b-nav>
      </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')
    }
  },

  data () {
    return {
      mainRoutes: ['library', 'kit', 'gallery'],
      subRoutes: ['home', 'introduction', 'blog', 'contact']
    }
  }
}
</script>

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