title: How to pass server data/context to a webpack generated Vue SSR application using vue-ssr-renderer?
body: <p>Following various tutorials and guides, I was able to get basic SSR Vue working with Webpack, the problem is I can't seem to be able to pass server data/context to the app. I'm using <a href="https://ssr.vuejs.org/guide/bundle-renderer.html#problems-with-basic-ssr" rel="nofollow noreferrer">Vue SSR Renderer</a>'s bundle renderer. My express <code>/router.js</code> looks like this:</p>
  
  <pre><code>const express = require("express");
  const fs = require('fs');
  const { resolve } = require('path');
  const { createBundleRenderer } = require('vue-server-renderer');
  
  const router = express.Router();
  
  const renderer = createRenderer();
  
  router.get('*', (req, res) =&gt; {
    const context = { url: req.url };
    renderer.renderToString(context, (err, html) =&gt; {
      if (err) {
        console.error(err);
        return res.status(500).end(err.message);
      }
      return res.end(html)
    });
  });
  
  function createRenderer() {
    const bundlePath = resolve(__dirname, './dist/server.bundle.js');
    const template = fs.readFileSync('./index.html', 'utf-8');
    return createBundleRenderer(bundlePath, { template }); // https://ssr.vuejs.org/api/#createbundlerenderer
  }
  
  module.exports = router;
  </code></pre>
  
  <p>The problem happens when it consumes my server bundle, produced by <code>/src/entry.server.js</code>:</p>
  
  <pre><code>import { createApp } from './main.js';
  
  export default context =&gt; new Promise((resolve, reject) =&gt; {
    const { app } = createApp(context);
    resolve(app);
  });
  </code></pre>
  
  <p>which consumes <code>/src/main.js</code></p>
  
  <pre><code>import Vue from 'vue';
  import App from './App.vue';
  
  export function createApp(context = {}) {
    const app = new Vue({
      render: h =&gt; h(App)
    });
  
    return { app };
  }
  </code></pre>
  
  <p>Here, the problem is that when I try to use the included server <code>context</code> as a data property, it evaluates to <code>undefined</code> and I have no idea why. Like so:</p>
  
  <pre><code>import Vue from 'vue';
  import App from './App.vue';
  
  export function createApp(context = {}) {
    const app = new Vue({
      render: h =&gt; h(App),
      data() {
        return { url: context:url }
      }
    });
  
    return { app };
  </code></pre>
  
  <p>I tried making <code>data</code> an arrow function in case it was a scoping issue, but that didn't solve it. I tried hardcoding url to a string, and that works and is shown on the client, which tells me the problem is the <code>context</code> variable not being sent correctly.And the API docs of <a href="https://ssr.vuejs.org/api/#createbundlerenderer" rel="nofollow noreferrer">vueServerRenderer.bundleRenderer()</a> do a poor job explaining how to pass data to the bundle.</p>
  
  <p>I know this is a problem that could be solved using Nuxt or Vuex, but I'm really trying to keep things minimal and only rely on them until I absolutely need them. </p>
  
  <p>Any ideas how I could solve this? </p>
  
  <p><strong>You can find and clone the entire project here, and find the entire webpack server and client configurations there as well</strong>:</p>
  
  <p><a href="https://github.com/sgarcia-dev/minimal-vue-ssr-webpack" rel="nofollow noreferrer">https://github.com/sgarcia-dev/minimal-vue-ssr-webpack</a></p>