diff --git a/examples/ssr.js b/examples/ssr.js
deleted file mode 100644
index ee4509d..0000000
--- a/examples/ssr.js
+++ /dev/null
@@ -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: '',
- 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: 'Hello
',
- data () {
- return { msg: 'Hello' }
- },
- metaInfo () {
- return {
- title: `${this.msg}`,
- 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 }))
-})
diff --git a/examples/ssr/app.js b/examples/ssr/app.js
new file mode 100644
index 0000000..ea8e84b
--- /dev/null
+++ b/examples/ssr/app.js
@@ -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: 'Hello
',
+ metaInfo: {
+ title: 'Coucou',
+ meta: [
+ {
+ hid: 'description',
+ name: 'description',
+ content: 'Coucou'
+ }
+ ]
+ }
+ }
+ },
+ template: '',
+ 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']
+ }
+ }
+ })
+}
diff --git a/examples/ssr/app.template.html b/examples/ssr/app.template.html
new file mode 100644
index 0000000..531cf99
--- /dev/null
+++ b/examples/ssr/app.template.html
@@ -0,0 +1,17 @@
+
+
+
+ {{ meta.text() }}
+ {{ title.text() }}
+ {{ link.text() }}
+ {{ style.text() }}
+ {{ webpackAssets }}
+ {{ script.text() }}
+ {{ noscript.text() }}
+
+
+ {{ app }}
+ {{ script.text({ body: true }) }}
+ {{ noscript.text({ body: true }) }}
+
+
diff --git a/examples/ssr/client-entry.js b/examples/ssr/client-entry.js
new file mode 100644
index 0000000..0fbbbe4
--- /dev/null
+++ b/examples/ssr/client-entry.js
@@ -0,0 +1,3 @@
+import createApp from './app'
+
+createApp().$mount('#app')
diff --git a/examples/ssr/index.js b/examples/ssr/index.js
new file mode 100644
index 0000000..12f7226
--- /dev/null
+++ b/examples/ssr/index.js
@@ -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 = ''
+ 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))
diff --git a/examples/ssr/server-entry.js b/examples/ssr/server-entry.js
new file mode 100644
index 0000000..1192635
--- /dev/null
+++ b/examples/ssr/server-entry.js
@@ -0,0 +1,3 @@
+import createApp from './app'
+
+export default createApp