- Added title and meta info to current views

client/src/app.vue

@@ -9,7 +9,10 @@
 
 <script>
 export default {
-  name: 'app'
+  name: 'app',
+  metaInfo: {
+    title: 'Auracle',
+  }
 }
 </script>
 

client/src/main.js

@@ -2,6 +2,12 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import App from './app.vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta, {
+  // optional pluginOptions
+  refreshOnceOnNavigation: true
+})
 
 // Environment
 require('dotenv').config()

client/src/pages/schools/schools-page.vue

@@ -5,9 +5,14 @@
 </template>
 
 <script>
-    export default {
+
-        name: 'schools-page'
+export default {
-    }
+  name: 'schools-page',
+  metaInfo: {
+    titleTemplate: '%s - Maîtrises'
+  },
+}
+
 </script>
 
 <style>

client/src/pages/schools/single-school-page.vue

@@ -1,9 +1,9 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
+  <div class="container-fluid p-4" id="spell-container">
-        <h1 class="display-3 font-display mb-3">{{ school.name }}</h1>
+    <h1 class="display-3 font-display mb-3">{{ school.name }}</h1>
-        <p>{{ school.description }}</p>
+    <p>{{ school.description }}</p>
-        <spell-list :school_id="id"/>
+    <spell-list :school_id="id"/>
-    </div>
+  </div>
 </template>
 
 <script>
@@ -14,32 +14,35 @@ import { RepositoryFactory } from "~/api/repositories"
 const Schools = RepositoryFactory.get('schools')
 
 export default {
-    name: 'single-school-page',
+  name: 'single-school-page',
-    components: {
+  metaInfo: {
-        'spell-list': SpellsList,
+    titleTemplate: '%s - Maîtrise I'
-    },
+  },
-    data() {
+  components: {
-        return {
+    'spell-list': SpellsList,
-            loading: false,
+  },
-            school: {},
+  data() {
-            id: this.$route.params.id
+    return {
-        }
+      loading: false,
-    },
+      school: {},
-    created() {
+      id: this.$route.params.id
-        this.computeSchool()
-    },
-    methods: {
-        async fetchSchool(id) {
-            const { data } = await Schools.getOne(id)
-            return data
-        },
-        async computeSchool() {
-            this.loading = true
-            const displaySchool = await this.fetchSchool(this.id)
-            this.loading = false
-            this.school = displaySchool
-        },
     }
+  },
+  created() {
+    this.computeSchool();
+  },
+  methods: {
+    async fetchSchool(id) {
+      const { data } = await Schools.getOne(id);
+      return data;
+    },
+    async computeSchool() {
+      this.loading = true;
+      const displaySchool = await this.fetchSchool(this.id);
+      this.loading = false;
+      this.school = displaySchool;
+    },
+  }
 }
 </script>
 

client/src/pages/spells/single-spell-page.vue

@@ -1,12 +1,15 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
+  <div class="container-fluid p-4" id="spell-container">
-        <h1 class="display-3 font-display mb-3">Sortilège</h1>
+    <h1 class="display-3 font-display mb-3">Sortilège I</h1>
-    </div>
+  </div>
 </template>
 
 <script>
 export default {
-
+  name: 'single-spell-page',
+  metaInfo: {
+    titleTemplate: '%s - Sortilège I'
+  },
 }
 </script>
 

client/src/pages/spells/spells-page.vue

@@ -1,8 +1,8 @@
 <template>
-    <div class="container-fluid p-4" id="spell-container">
+  <div class="container-fluid p-4" id="spell-container">
-        <h1 class="display-3 font-display mb-3">Sortilèges</h1>
+    <h1 class="display-3 font-display mb-3">Sortilèges</h1>
-        <spell-list/>
+    <spell-list/>
-    </div>
+  </div>
 </template>
 
 <script>
@@ -10,6 +10,9 @@ import SpellsList from "~/components/spells/spells-list"
 
 export default {
   name: 'spells-page',
+  metaInfo: {
+    titleTemplate: '%s - Grimoire'
+  },
   components: {
     'spell-list': SpellsList,
   }

client/src/pages/timelines/timeline-page.vue

@@ -6,7 +6,10 @@
 
 <script>
 export default {
-    name: 'timeline-page',
+  name: 'timeline-page',
+  metaInfo: {
+    titleTemplate: '%s - Âges'
+  },
 }
 </script>
 

client/src/pages/user/login-page.vue

@@ -88,6 +88,9 @@
 
 export default {
     name: 'login-page',
+    metaInfo: {
+      titleTemplate: '%s - Connexion'
+    },
     data() {
       return {
         email: "",

client/src/pages/user/profile-page.vue

@@ -6,12 +6,6 @@
   >
     <h2 class="display-3 font-display mb-3">
       <span class="username">{{ user.name }}</span>
-      <span
-        v-if="user.verified"
-        class="verified"
-      >
-        <i class="mad">check_circle</i>
-      </span>
     </h2>
     <span>Membre depuis le {{ registered_date }}</span>
 
@@ -41,6 +35,9 @@ export default {
 
       return new Intl.DateTimeFormat("fr", date_options).format(raw_date);
     }
+  },
+  metaInfo: {
+    titleTemplate: '%s - Profil'
   }
 }
 </script>

client/src/pages/user/register-page.vue

@@ -118,6 +118,9 @@
 <script>
 export default {
   name: 'register-page',
+  metaInfo: {
+    titleTemplate: '%s - Inscription'
+  },
   data() {
     return {
       name: "",