JSS Tech preview 3 vueJs sample basic

I'm looking to include vue-meta for Server Rendering.

I've successfully added it for Client Rendering, but, because the tutorial to include vue-meta is very different that what we have in JSS I don't know how to include it for Server Rendering.


What I have done so far: - I added 4 fields ( meta ) in routes.sitecore.js: - List item - App.vue: - List item - data/routes/en.json - List item - boot/Root.js - List item

If I follow the steps in the documentation of vue-meta, how should I convert their example to the code you have for JSS ?

Thanks for your help!

1 Answer 1



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.


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: {
        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 (

DISCLAIMER: this code has not been tested, it's ad-hoc based on the vue-meta docs and JSS sample code.

  • Hi @adam, I've tried to include your code and I've this error when deploying : imgur.com/a/JqtCcCZ Jun 14, 2018 at 16:25
  • Based on your screenshot, it looks like you have app locally scoped in your promise chain, e.g. .then((app) => (), so app will only be available within that then function. You'll either need to hoist app up outside of the promise chain so that any .then function can reference it, or explicitly pass it along through the chain. Again, this is all untested, ad-hoc code, so you may have to do some massaging to get it right or make it work. Just trying to help you find the right direction.
    – Adam Weber
    Jun 14, 2018 at 19:09
  • An example of passing app along to the next .then function: gist.github.com/aweber1/807aedfa0472faffb527fdc5b68aa87f
    – Adam Weber
    Jun 14, 2018 at 19:11
  • We are really close, because your code return : &lt;title data-vue-meta=&quot;true&quot;&gt;Page | Site&lt;/title&gt; Jun 15, 2018 at 14:14
  • Cool. That seems like an implementation detail best left to be worked out by you and the vue-meta library. It looks like the vue-meta plugin is wired up correctly and rendering some sort of title content but invocation / syntax is probably not correct given that the code is not "formal". Again, the code provided is untested and ad-hoc. If you find the final correct format/syntax, please share :)
    – Adam Weber
    Jun 15, 2018 at 16:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.