Set title on every page

nuxt.config.js

@@ -6,6 +6,7 @@ export default {
   ** Headers of the page
   */
   head: {
+    titleTemplate: "%s | Moritz Ruth",
     link: [
       { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
       { rel: "stylesheet", href: "https://fonts.googleapis.com/css?family=Alata&display=swap" }

pages/index.vue

@@ -199,6 +199,7 @@
   export default {
     name: "IndexPage",
     layout: "empty",
+    head: () => ({ title: "Moritz Ruth", titleTemplate: "%s" }),
     components: { NavigationBar, AnimatedLogo, InstagramIcon, TwitterIcon, NPMIcon, GitHubIcon, EmailIcon },
     mounted() {
       let configIndex = 0;

pages/legal-notice.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="legal-notice-page">
-    <div class="content">
+    <NavigationBar title="Impressum"/>
+    <main class="content">
       <h1 class="heading--1">
-        Legal Notice
+        Impressum
       </h1>
       <h2 class="heading--3">
         Diensteanbieter
@@ -60,13 +61,18 @@
         rel="noopener"
         target="_blank"
       >Erstellt mit kostenlosem Datenschutz-Generator.de von Dr. Thomas Schwenke</a>
-    </div>
+    </main>
   </div>
 </template>
 
 <script>
+  import NavigationBar from "../components/NavigationBar";
   export default {
     name: "LegalNoticePage",
-    head: () => ({ htmlAttrs: { lang: "de" } })
+    components: { NavigationBar },
+    head: () => ({
+      htmlAttrs: { lang: "de" },
+      title: "Legal notice"
+    })
   };
 </script>

pages/privacy-policy.vue

@@ -290,6 +290,9 @@
   export default {
     name: "PrivacyPolicyPage",
     components: { NavigationBar, ExternalLink },
-    head: () => ({ htmlAttrs: { lang: "de" } })
+    head: () => ({
+      htmlAttrs: { lang: "de" },
+      title: "Privacy Policy"
+    })
   };
 </script>

pages/projects.vue

@@ -71,6 +71,7 @@
 
   export default {
     name: "ProjectsPage",
-    components: { MyProject, NavigationBar }
+    components: { MyProject, NavigationBar },
+    head: () => ({ title: "Projects" })
   };
 </script>