use messages in template & add automatic page titling from route name

src/App.vue

@@ -3,7 +3,7 @@
     <header>
       <b-navbar toggleable="md">
         <b-navbar-brand :to="{ name: 'home' }">
-          En Français
+          {{ $t('title') }}
         </b-navbar-brand>
 
         <b-navbar-toggle target="nav-collapse" />
@@ -11,13 +11,13 @@
         <b-collapse id="nav-collapse" is-nav>
           <b-navbar-nav class="ml-auto">
             <b-nav-item :to="{ name: 'library' }">
-              Bibliothèque
+              {{ $t('sections.library') }}
             </b-nav-item>
             <b-nav-item :to="{ name: 'kit' }">
-              Kit de désapprentissage
+              {{ $t('sections.kit') }}
             </b-nav-item>
             <b-nav-item :to="{ name: 'gallery' }">
-              Créations numériques
+              {{ $t('sections.gallery') }}
             </b-nav-item>
           </b-navbar-nav>
         </b-collapse>
@@ -36,15 +36,13 @@
 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' }
-    ]
+  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>