Forked from express-vue-builder

Vue.js server-side rendering middleware for Koa.js (Koa 2)

This package provides production-ready server-side Vue.js application rendering middleware for Koa 2. It creates a new instance of VueRender class (provided by the vue-builder dependency) and sets it on the context object as ctx.vue.

This is an open source package for Vue.js and Koa 2. The source code is available in a github repo where you can also find the issue tracker.

• vue-webpack: Webpack configuration object generator for Vue.js.
• vue-builder: Server-side and client-side rendering for Vue.js.
• express-vue-builder Vue builder for Express.js
• express-vue-dev: Vue.js development server middleware for Express.js.
• vue-cli-template: A simple server-side rendering CLI template for Vue.js.

Run the command below to install the package.

$ npm install --save-dev koa-vue-builder vue-builder

Before we deploy application in production, we need to compile our Vue.js application into a bundle. A bundle is simply a file holding application's source code. Because we would like to render application in browsers as well as on the server, we need to build two bundle files - one targeting browsers, the other targeting the server. Check the attached example on how to build a bundle. Check the documentation of the vue-builder package for details.

Once you've created the bundle file for server-side, you can create a middleware.

const {bundleRenderer} = require('koa-vue-builder');

let middleware = bundleRenderer(`./dist/server/bundle.js`); // pass this to app.use() of your Koa application (see example below)

Check the included ./example directory or run the npm run example:start command to start the sample application.

bundleRenderer(bundlePath, options)

Server-side rendering middleware for Vue.js application.

Uses:

• vue-builder
• vue-webpack

Works using a piped Transform stream assigned to the context body :)

router.get('/', async (ctx, next) => {
  ctx.type = 'html';
  if (ctx.vue) {
    let stream = ctx.vue.renderToStream();
    let htmlWriter = new HtmlWriterStream();
    ctx.body = stream.pipe(htmlWriter);
  } else {
    console.log('no .vue object found on ctx. No SSR streaming possible :()');
  }
  await next();
});

app
  .use(router.routes())
  .use(router.allowedMethods());

Please feel to fork and provide an adapter for Koa 1.x.

Please fork this repo and work from there, then send a PR for each improvement or feature added.

Currently the npm scripts use babel-node to run the various node tasks (using .babelrc config). The code uses async/await which is most suitable for Koa 2 integration. When Node 7.x is out, babel-node might not be (as) necessary!?

npm test

Build

npm run example:build

Run

npm run example:start

Go to: localhost:3000

MIT