You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Provide a template for the entire page's HTML. The template should contain a comment `<!--vue-ssr-outlet-->` which serves as the placeholder for rendered app content.
88
94
89
95
The template also supports basic interpolation using the render context:
@@ -101,13 +107,43 @@ The template automatically injects appropriate content when certain data is foun
101
107
102
108
In 2.5.0+, the embed script also self-removes in production mode.
103
109
110
+
In 2.6.0+, if `context.nonce` is present, it will be added as the `nonce` attribute to the embedded script. This allows the inline script to conform to CSP that requires nonce.
111
+
104
112
In addition, when `clientManifest` is also provided, the template automatically injects the following:
105
113
106
114
- Client-side JavaScript and CSS assets needed by the render (with async chunks automatically inferred);
107
115
- Optimal `<link rel="preload/prefetch">` resource hints for the rendered page.
108
116
109
117
You can disable all automatic injections by also passing `inject:false` to the renderer.
110
118
119
+
**If using a function template:**
120
+
121
+
::: warning
122
+
Function template is only supported in 2.6+ and when using `renderer.renderToString`. It is NOT supported in `renderer.renderToStream`.
123
+
:::
124
+
125
+
The `template` option can also be function that returns the rendered HTML or a Promise that resolves to the rendered HTML. This allows you to leverage native JavaScript template strings and potential async operations in the template rendering process.
126
+
127
+
The function receives two arguments:
128
+
129
+
1. The rendering result of the app component as a string;
130
+
2. The rendering context object.
131
+
132
+
Example:
133
+
134
+
``` js
135
+
constrenderer=createRenderer({
136
+
template: (result, context) => {
137
+
return`<html>
138
+
<head>${context.head}</head>
139
+
<body>${result}</body>
140
+
<html>`
141
+
}
142
+
})
143
+
```
144
+
145
+
Note that when using a custom template function, nothing will be automatically injected - you will be in full control of what the eventual HTML includes, but also will be responsible for including everything yourself (e.g. asset links if you are using the bundle renderer).
146
+
111
147
See also:
112
148
113
149
- [Using a Page Template](../guide/#using-a-page-template)
As an example, check out [`v-show`'s server-side implementation](https://github.com/vuejs/vue/blob/dev/src/platforms/web/server/directives/show.js).
247
283
284
+
### serializer
285
+
286
+
> New in 2.6
287
+
288
+
Provide a custom serializer function for `context.state`. Since the serialized state will be part of your final HTML, it is important to use a function that properly escapes HTML characters for security reasons. The default serializer is [serialize-javascript](https://github.com/yahoo/serialize-javascript) with `{ isJSON:true }`.
289
+
248
290
## webpack Plugins
249
291
250
292
The webpack plugins are provided as standalone files and should be required directly:
0 commit comments