Skip to content

Commit 7f3683c

Browse files
author
Guillaume Chau
authored
Update README.md
1 parent 47188fc commit 7f3683c

File tree

1 file changed

+38
-0
lines changed

1 file changed

+38
-0
lines changed

packages/vue-ssr/README.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,44 @@ VueSSR.outlet = 'my-app'
106106

107107
In this example, Vue SSR expects a `<div id="my-app">` element in the HTML page.
108108

109+
### Head and Body injection
110+
111+
You can modify the head and body of the SSR render with the `appendHtml` function. This example uses vue-meta:
112+
113+
```javascript
114+
VueSSR.createApp = function (context) {
115+
return new Promise((resolve, reject) => {
116+
const { app, router, store } = createApp()
117+
118+
router.push(context.url)
119+
context.meta = app.$meta()
120+
121+
// ...
122+
123+
resolve({
124+
app,
125+
appendHtml() {
126+
const {
127+
title, link, style, script, noscript, meta
128+
} = context.meta.inject()
129+
130+
return {
131+
head: `
132+
${meta.text()}
133+
${title.text()}
134+
${link.text()}
135+
${style.text()}
136+
${script.text()}
137+
${noscript.text()}
138+
`,
139+
body: script.text({ body: true })
140+
}
141+
}
142+
})
143+
})
144+
}
145+
```
146+
109147

110148
*:warning: The CSS can flicker in developpement mode and load after the app is rendered. This is due to the HMR system having to append dynamic style tags in the page to get the fastest reloading possible. This is not the case in production mode (try running your app with `meteor --production`).*
111149

0 commit comments

Comments
 (0)