UPDATE - JSS TECH PREVIEW 4
The Vue sample app for JSS Tech Preview 4 uses vue-meta for managing meta fields in both SSR and client-side rendering.
For the specific usage of vue-meta and SSR, see the server/server.js file.
JSS TECH PREVIEW 3
The vue-meta docs use bundleRenderer for SSR as opposed to just the "standard" renderer, but based on this example code: https://github.com/declandewet/vue-meta/blob/master/examples/ssr.js, it looks like you'd need to make a few modifications to src/server.js:
// the following code would be in the `.then((content)` chain after `renderer.renderToString(app)`
// where `app` is a Vue instance, and assumes you've already registered the Meta plugin elsewhere via Vue.use(Meta);
const meta = app.$meta().inject();
const serverComponent = new Vue({
render(createElement) {
return createElement(ServerHtml, {
props: {
content,
initialState: validRouteOrNull,
distPath: __BUNDLE_OUTPUT_PATH__,
meta, // pass the meta object as prop to `ServerHtml`
},
});
},
});
Then in src/app/ServerHtml.js you'd be able to add/reference the meta prop and render the necessary meta data to the server-generated html. e.g.
...
props: {
...
meta: {
type: Object
},
},
render() {
return (
<html>
<head>
<title>{this.meta.title.text()}</title>
</head>
...
</html>
)
}
...
DISCLAIMER: this code has not been tested, it's ad-hoc based on the vue-meta docs and JSS sample code.
- App.vue:
- 
- data/routes/en.json
- 
- boot/Root.js
- 
