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.

https://github.com/declandewet/vue-meta

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!

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.

  • Hi @adam, I've tried to include your code and I've this error when deploying : imgur.com/a/JqtCcCZ – tomagladiator Jun 14 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 at 19:09
  • An example of passing app along to the next .then function: gist.github.com/aweber1/807aedfa0472faffb527fdc5b68aa87f – Adam Weber Jun 14 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; – tomagladiator Jun 15 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 at 16:15

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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