enfrancais-app/src/App.vue

<template>
  <div id="app">
    <header>
      <b-navbar toggleable="md">
        <b-navbar-brand :to="{ name: 'home' }">
          En Français
        </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' }">
              Bibliothèque
            </b-nav-item>
            <b-nav-item :to="{ name: 'kit' }">
              Kit de désapprentissage
            </b-nav-item>
            <b-nav-item :to="{ name: 'gallery' }">
              Créations numériques
            </b-nav-item>
          </b-navbar-nav>
        </b-collapse>
      </b-navbar>

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

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

    <footer>
      <p>footer</p>
    </footer>
  </div>
</template>

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

  metaInfo: {
    // if no subcomponents specify a metaInfo.title, this title will be used
    title: 'Home',
    // all titles will be injected into this template
    titleTemplate: '%s | En Français',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ]
  }
}
</script>

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