mirrors/vue-meta
2
0
Fork 0
mirror of https://github.com/tenrok/vue-meta.git synced 2026-06-24 12:40:33 +03:00
Code Activity

chore: improve ssr example

Browse Source
This commit is contained in:
pimlie
2019-03-11 10:45:59 +01:00
parent e4e0996aee
commit c3e97173ee
6 changed files with 115 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/ssr.js
-52
View File
@@ -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 }))
})
examples/ssr/app.js
+56
View File
@@ -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']
}
}
})
}
examples/ssr/app.template.html
+17
View File
@@ -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>
examples/ssr/client-entry.js
+3
View File
@@ -0,0 +1,3 @@
import createApp from './app'
createApp().$mount('#app')
examples/ssr/index.js
+36
View File
@@ -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))
examples/ssr/server-entry.js
+3
View File
@@ -0,0 +1,3 @@
import createApp from './app'
export default createApp