feat(router): add ability to enter custom title and meta info

Author: natedunn

public/test.png

@@ -7,7 +7,7 @@ const RouterLayout = createRouterLayout(layout => {
   return import("@/views/layouts/" + layout + ".vue");
 });
 
-export default createRouter({
+const router = createRouter({
   history: createWebHistory(process.env.BASE_URL),
   routes: [
     {
@@ -17,3 +17,43 @@ export default createRouter({
     }
   ]
 });
+
+
+router.beforeEach((to, from, next) => {
+  // This goes through the matched routes from last to first, finding the closest route with a title.
+  // eg. if we have /some/deep/nested/route and /some, /deep, and /nested have titles, nested's will be chosen.
+  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+
+  // Find the nearest route element with meta tags.
+  const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+  // const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+
+  // If a route with a title was found, set the document (page) title to that value.
+  if(nearestWithTitle) document.title = nearestWithTitle.meta.title;
+
+  // Remove any stale meta tags from the document using the key attribute we set below.
+  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el?.parentNode?.removeChild(el));
+
+  // Skip rendering meta tags if there are none.
+  if(!nearestWithMeta) return next();
+
+  // Turn the meta tag definitions into actual elements in the head.
+  nearestWithMeta.meta.metaTags.map((tagDef: { [x: string]: string; }) => {
+    const tag = document.createElement('meta');
+
+    Object.keys(tagDef).forEach(key => {
+      tag.setAttribute(key, tagDef[key]);
+    });
+
+    // We use this to track which meta tags we create, so we don't interfere with other ones.
+    tag.setAttribute('data-vue-router-controlled', '');
+
+    return tag;
+  })
+  // Add the meta tags to the document head.
+  .forEach((tag: Node) => document.head.appendChild(tag));
+
+  next();
+});
+
+export default router;

src/router/index.ts

@@ -1,7 +1,7 @@
 <template>
   <DocHeader>
     <template #title> Installation </template>
-    <template #subtitle> Get started in seconds </template>
+    <template #subtitle>Get started in Vue Zephyr in minutes.</template>
     <template #right-side>
       <div :class="tw`justify-end flex items-start md:mt-2 space-x-2`">
         <Badge classAppend="bg-yellow-500 text-gray-900">In Progress</Badge>
@@ -127,4 +127,35 @@ export default defineComponent({
     return { codes, tw };
   },
 });
-</script>
+</script>
+
+<route>
+{
+  "name": "install",
+  "meta": {
+    "title": "Installation | Vue Zephyr",
+    "metaTags": [
+      {
+        "property": "og:title",
+        "content": "Installation"
+      },
+      {
+        "name": "description",
+        "content": "Get started in Vue Zephyr in minutes."
+      },
+      {
+        "property": "og:description",
+        "content": "Get started in Vue Zephyr in minutes."
+      },
+      {
+        "property": "og:url",
+        "content": "https://usezephyr.com/docs/install"
+      },
+      {
+        "property": "og:url",
+        "content": "https://usezephyr.com/test.png"
+      }
+    ]
+  }
+}
+</route>

src/views/pages/docs/install.vue

@@ -0,0 +1,44 @@
+<template>
+  <div></div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<route>
+{
+  "name": "starter",
+  "meta": {
+    "title": "Starter | Vue Zephyr",
+    "metaTags": [
+      {
+        "property": "og:title",
+        "content": "Starter"
+      },
+      {
+        "name": "description",
+        "content": "This is a starter page for the docs. You should not be here."
+      },
+      {
+        "property": "og:description",
+        "content": "This is a starter page for the docs. You should not be here."
+      },
+      {
+        "property": "og:url",
+        "content": "https://usezephyr.com/docs/starter"
+      },
+      {
+        "property": "og:url",
+        "content": "https://usezephyr.com/test.png"
+      }
+    ]
+  }
+}
+</route>

src/views/pages/docs/starter.vue

@@ -32,5 +32,33 @@ export default defineComponent({
 });
 </script>
 
-<style scoped>
-</style>
+<route>
+{
+  "name": "theming",
+  "meta": {
+    "title": "Themeing | Vue Zephyr",
+    "metaTags": [
+      {
+        "property": "og:title",
+        "content": "Theming"
+      },
+      {
+        "name": "description",
+        "content": "Customize the apperance for your project."
+      },
+      {
+        "property": "og:description",
+        "content": "Customize the apperance for your project."
+      },
+      {
+        "property": "og:url",
+        "content": "https://usezephyr.com/docs/theming"
+      },
+      {
+        "property": "og:url",
+        "content": "https://usezephyr.com/test.png"
+      }
+    ]
+  }
+}
+</route>

src/views/pages/docs/theming.vue

@@ -17,5 +17,11 @@ module.exports = {
   },
   chainWebpack: (config) => {
     addVueRawPreLoader(config);
+    config
+      .plugin('html')
+      .tap(args => {
+        args[0].title = 'Vue Zephyr'
+        return args
+      })
   },
 };