fix: meta content templates (#429)

* examples: add content templates to ssr example

* fix: improve meta content templates

* chore: cleanup debug helper

* refactor: split long if into variables

examples/server.js

@@ -32,11 +32,12 @@ app.use(express.static(__dirname))
 
 app.use(async (req, res, next) => {
   if (!req.url.startsWith('/ssr')) {
-    next()
+    return next()
   }
 
   try {
-    const html = await renderPage()
+    const context = { url: req.url }
+    const html = await renderPage(context)
     res.send(html)
   } catch (e) {
     consola.error('SSR Oops:', e)

examples/ssr/App.js

@@ -1,32 +1,82 @@
 import Vue from 'vue'
+import Router from 'vue-router'
 import VueMeta from '../../'
 
+Vue.use(Router)
 Vue.use(VueMeta, {
   tagIDKeyName: 'hid'
 })
 
 export default function createApp () {
-  return new Vue({
-    components: {
-      Hello: {
-        template: '<p>Hello World</p>',
-        metaInfo: {
-          title: 'Hello World',
-          meta: [
-            {
-              hid: 'description',
-              name: 'description',
-              content: 'The description'
-            }
-          ]
+  const Home = {
+    template: `<div>
+      <router-link to="/about">About</router-link>
+
+      <p>Hello World</p>
+    </div>`,
+    metaInfo: {
+      title: 'Hello World',
+      meta: [
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          content: 'Hello World'
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'Hello World'
         }
-      }
-    },
+      ]
+    }
+  }
+
+  const About = {
+    template: `<div>
+      <router-link to="/">Home</router-link>
+
+      <p>About</p>
+    </div>`,
+    metaInfo: {
+      title: 'About World',
+      meta: [
+        {
+          hid: 'og:title',
+          name: 'og:title',
+          content: 'About World'
+        },
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'About World'
+        }
+      ]
+    }
+  }
+
+  const router = new Router({
+    mode: 'history',
+    base: '/ssr',
+    routes: [
+      { path: '/', component: Home },
+      { path: '/about', component: About }
+    ]
+  })
+
+  const app = new Vue({
+    router,
     metaInfo () {
       return {
         title: 'Boring Title',
         htmlAttrs: { amp: true },
         meta: [
+          {
+            skip: this.count < 1,
+            hid: 'og:title',
+            name: 'og:title',
+            template: chunk => `${chunk} - My Site`,
+            content: 'Default Title'
+          },
           {
             hid: 'description',
             name: 'description',
@@ -73,8 +123,6 @@ export default function createApp () {
     },
     template: `
     <div id="app">
-      <hello/>
-
       <p>{{ count }} users loaded</p>
 
       <ul>
@@ -85,6 +133,10 @@ export default function createApp () {
         {{ user.id }}: {{ user.name }}
         </li>
       </ul>
+
+      <router-view />
     </div>`
   })
+
+  return { app, router }
 }

examples/ssr/browser.js

@@ -2,4 +2,5 @@ import createApp from './App'
 
 window.users = []
 
-createApp().$mount('#app')
+const { app } = createApp()
+app.$mount('#app')

examples/ssr/server.js

@@ -14,14 +14,27 @@ const compiled = template(templateContent, { interpolate: /{{([\s\S]+?)}}/g })
 
 process.server = true
 
-export async function renderPage () {
-  const app = await createApp()
-  const appHtml = await renderer.renderToString(app)
+export async function renderPage ({ url }) {
+  const { app, router } = await createApp()
 
-  const pageHtml = compiled({
-    app: appHtml,
-    ...app.$meta().inject()
+  router.push(url.substr(4))
+
+  return new Promise((resolve, reject) => {
+    router.onReady(async () => {
+      const matchedComponents = router.getMatchedComponents()
+      // no matched routes, reject with 404
+      if (!matchedComponents.length) {
+        return reject({ code: 404 })
+      }
+
+      const appHtml = await renderer.renderToString(app)
+
+      const pageHtml = compiled({
+        app: appHtml,
+        ...app.$meta().inject()
+      })
+
+      resolve(pageHtml)
+    })
   })
-
-  return pageHtml
 }