chore: improve ssr example

2026-06-23 06:00:34 +03:00 · 2019-03-11 10:45:59 +01:00
parent e4e0996aee
commit c3e97173ee
6 changed files with 115 additions and 52 deletions
@@ -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