koa-vue-renderer v1.0.0-beta.1

koa-vue-renderer

A useful Koa helper and middleware to make working with Vue's server-side rendering as simple as possible.

Usage

Ensure you have valid client and server Webpack configuration files (example here), and a HTML template file loaded. In your server file, add the following:

const fs = require('fs');
const VueRenderer = require('koa-vue-renderer');
const clientConfig = require('./webpack.client');
const serverConfig = require('./webpack.server');

const template = fs.readFileSync(resolve(__dirname, 'index.template.html'), 'utf-8');

const vueRenderer = new VueRenderer({
  clientConfig,
  serverConfig,
  template,
});

vueRenderer.setup(); // Call this when your Koa server is initialized.
app.use(vueRenderer.middleware()); // Adds `ctx.renderer` to middleware.

Now, any route middleware will have access to ctx.renderer:

router.get('*', (ctx) => {
  ctx.type = 'html';
  ctx.body = await ctx.renderer.renderToString({
    // Vue server-side context.
  });
});

For a more complete example, check out the /example directory.

Features

• Runs webpack-dev-middleware with provided configuration.
• Support for Hot Module Replacement.
• ctx.renderer allowing simple SSR rendering within middleware.
• Promise based renderToString support.