🔍 Improving SEO

components/layout/sidenav.vue

@@ -59,7 +59,7 @@
         <i class="material-icons">settings</i>
       </nuxt-link>
     </nav>
-    <div v-if="$route.path === '/'">
+    <div v-if="$route.path == '/'">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -80,7 +80,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/realtime'">
+    <div v-else-if="$route.path.includes('/realtime')">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -96,7 +96,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/graphql'">
+    <div v-else-if="$route.path.includes('/graphql')">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -122,7 +122,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/doc'">
+    <div v-else-if="$route.path.includes('/doc')">
       <nav class="secondary-nav">
         <ul>
           <li>
@@ -138,7 +138,7 @@
         </ul>
       </nav>
     </div>
-    <div v-else-if="$route.path === '/settings'">
+    <div v-else-if="$route.path.includes('/settings')">
       <nav class="secondary-nav">
         <ul>
           <li>

nuxt.config.js

@@ -36,7 +36,7 @@ export default {
     host: "0.0.0.0", // default: localhost
   },
   head: {
-    title: `${options.name} \u2022 ${options.shortDescription}`,
+    title: `${options.name} • ${options.shortDescription}`,
     meta: [
       {
         name: "keywords",
@@ -49,7 +49,7 @@ export default {
       },
       {
         itemprop: "name",
-        content: `${options.name} \u2022 ${options.shortDescription}`,
+        content: `${options.name} • ${options.shortDescription}`,
       },
       {
         itemprop: "description",

pages/doc.vue

@@ -310,14 +310,12 @@ export default {
     "pw-section": () => import("~/components/layout/section"),
     Editor: AceEditor,
   },
-
   data() {
     return {
       collectionJSON: "[]",
       items: [],
     }
   },
-
   methods: {
     uploadCollection() {
       this.rawInput = true
@@ -352,5 +350,10 @@ export default {
       }
     },
   },
+  head() {
+    return {
+      title: `Documentation • ${this.$store.state.name}`,
+    }
+  },
 }
 </script>

pages/graphql.vue

@@ -381,7 +381,6 @@ export default {
       },
     }
   },
-
   computed: {
     url: {
       get() {
@@ -445,7 +444,6 @@ export default {
   mounted() {
     if (this.$store.state.gql.schemaIntrospection && this.$store.state.gql.schema) {
       const gqlSchema = gql.buildClientSchema(JSON.parse(this.$store.state.gql.schemaIntrospection))
-
       this.getDocsFromSchema(gqlSchema)
     }
   },
@@ -744,5 +742,10 @@ export default {
       })
     },
   },
+  head() {
+    return {
+      title: `GraphQL • ${this.$store.state.name}`,
+    }
+  },
 }
 </script>

pages/realtime.vue

@@ -33,5 +33,10 @@ export default {
     socketio: () => import("~/components/realtime/socketio"),
     mqtt: () => import("~/components/realtime/mqtt"),
   },
+  head() {
+    return {
+      title: `Realtime • ${this.$store.state.name}`,
+    }
+  },
 }
 </script>

pages/settings.vue

@@ -219,7 +219,6 @@ export default {
     login: () => import("~/components/firebase/login"),
     logout: () => import("~/components/firebase/logout"),
   },
-
   data() {
     return {
       // NOTE:: You need to first set the CSS for your theme in /assets/css/themes.scss
@@ -327,7 +326,6 @@ export default {
       fb,
     }
   },
-
   watch: {
     proxySettings: {
       deep: true,
@@ -337,7 +335,6 @@ export default {
       },
     },
   },
-
   methods: {
     applyTheme({ class: name, color, aceEditor }) {
       this.applySetting("THEME_CLASS", name)
@@ -409,12 +406,10 @@ export default {
       }
     },
   },
-
   beforeMount() {
     this.settings.THEME_CLASS = document.documentElement.className
     this.settings.THEME_COLOR = this.getActiveColor()
   },
-
   computed: {
     proxySettings() {
       return {
@@ -423,5 +418,10 @@ export default {
       }
     },
   },
+  head() {
+    return {
+      title: `Settings • ${this.$store.state.name}`,
+    }
+  },
 }
 </script>

store/state.js

@@ -47,4 +47,5 @@ export default () => ({
     clientId: "",
     scope: "",
   },
+  name: "Postwoman",
 })