chore: improve ssr example

2026-06-14 11:12:27 +03:00 · 2019-03-11 10:45:59 +01:00
parent e4e0996aee
commit c3e97173ee
6 changed files with 115 additions and 52 deletions
@@ -1,52 +0,0 @@
-const Vue = require('vue')
-const renderer = require('vue-server-renderer').createRenderer()
-const VueMeta = require(process.env.NODE_ENV === 'development' ? '../' : 'vue-meta')
-
-Vue.use(VueMeta, {
-  tagIDKeyName: 'hid'
-})
-
-const vm = new Vue({
-  template: '<hello/>',
-  metaInfo: {
-    title: 'Hello',
-    htmlAttrs: { amp: undefined },
-    meta: [
-      { hid: 'description', name: 'description', content: 'Hello World' }
-    ],
-    script: [
-      { innerHTML: '{ "@context": "http://www.schema.org", "@type": "Organization" }', type: 'application/ld+json' },
-      { innerHTML: '{ "body": "yes" }', body: true, type: 'application/ld+json' }
-    ],
-    __dangerouslyDisableSanitizers: ['script']
-  },
-  components: {
-    Hello: {
-      template: '<p>Hello</p>',
-      data () {
-        return { msg: 'Hello' }
-      },
-      metaInfo () {
-        return {
-          title: `<b>${this.msg}</b>`,
-          meta: [
-            { hid: 'description', name: 'description', content: this.msg }
-          ]
-        }
-      },
-      created () {
-        this.msg = 'Hi!'
-      }
-    }
-  }
-})
-
-renderer.renderToString(vm, function (err, html) {
-  if (err) throw err
-  const $meta = vm.$meta().inject()
-  console.log('Title:\n' + $meta.title.text())
-  console.log('\nHTML attrs:\n' + $meta.htmlAttrs.text())
-  console.log('\nMeta:\n' + $meta.meta.text())
-  console.log('\nHead Script:\n' + $meta.script.text())
-  console.log('\nBody Script:\n' + $meta.script.text({ body: true }))
-})
@@ -0,0 +1,56 @@
+import Vue from 'vue'
+// import VueMeta from 'vue-meta'
+
+export default async function createApp() {
+  // the dynamic import is for this example only
+  const vueMetaModule = process.env.NODE_ENV === 'development' ? '../../' : 'vue-meta'
+  const VueMeta = await import(vueMetaModule).then(m => m.default || m)
+
+  Vue.use(VueMeta, {
+    tagIDKeyName: 'hid'
+  })
+
+  return new Vue({
+    components: {
+      Hello: {
+        template: '<p>Hello</p>',
+        metaInfo: {
+          title: 'Coucou',
+          meta: [
+            {
+              hid: 'description',
+              name: 'description',
+              content: 'Coucou'
+            }
+          ]
+        }
+      }
+    },
+    template: '<hello/>',
+    metaInfo: {
+      title: 'Hello',
+      htmlAttrs: { amp: true },
+      meta: [
+        {
+          hid: 'description',
+          name: 'description',
+          content: 'Hello World'
+        }
+      ],
+      script: [
+        {
+          hid: 'ldjson-schema',
+          type: 'application/ld+json',
+          innerHTML: '{ "@context": "http://www.schema.org", "@type": "Organization" }'
+        }, {
+          type: 'application/ld+json',
+          innerHTML: '{ "body": "yes" }',
+          body: true
+        }
+      ],
+      __dangerouslyDisableSanitizersByTagID: {
+        'ldjson-schema': ['innerHTML']
+      }
+    }
+  })
+}
@@ -0,0 +1,17 @@
+<!doctype html>
+<html data-vue-meta-server-rendered {{ htmlAttrs.text() }}>
+  <head {{ headAttrs.text() }}>
+    {{ meta.text() }}
+    {{ title.text() }}
+    {{ link.text() }}
+    {{ style.text() }}
+    {{ webpackAssets }}
+    {{ script.text() }}
+    {{ noscript.text() }}
+  </head>
+  <body {{ bodyAttrs.text() }}>
+    {{ app }}
+    {{ script.text({ body: true }) }}
+    {{ noscript.text({ body: true }) }}
+  </body>
+</html>
@@ -0,0 +1,3 @@
+import createApp from './app'
+
+createApp().$mount('#app')
@@ -0,0 +1,36 @@
+import path from 'path'
+import fs from 'fs-extra'
+import template from 'lodash/template'
+import { createRenderer } from 'vue-server-renderer'
+import consola from 'consola'
+import createApp from './server-entry'
+
+const renderer = createRenderer()
+
+async function createPage() {
+  const templateFile = path.resolve(__dirname, 'app.template.html')
+  const templateContent = await fs.readFile(templateFile, { encoding: 'utf8' })
+
+  // see: https://lodash.com/docs#template
+  const compiled = template(templateContent, { interpolate: /{{([\s\S]+?)}}/g })
+
+  const webpackAssets = '<link rel="stylesheet" href="../global.css">'
+  const serverApp = await createApp()
+  const appHtml = await renderer.renderToString(serverApp)
+
+  const pageHtml = compiled({
+    app: appHtml,
+    webpackAssets,
+    ...serverApp.$meta().inject()
+  })
+
+  return pageHtml
+}
+
+consola.info(`Creating ssr page`)
+createPage()
+  .then((pageHtml) => {
+    consola.info(`Done, page:`)
+    consola.log(pageHtml)
+  })
+  .catch(e => consola.error(e))
@@ -0,0 +1,3 @@
+import createApp from './app'
+
+export default createApp