Vue Node Renderer

This module makes it rather easy to load Vue.JS Component files into your Node environment without much fuss.

This can be very helpful for unit testing your Vue apps server side (without the need for Karma or other browser-based test environments) or to server render them on-the-fly into a real DOM.

Install

You can install via yarn or npm:

yarn add vue-node-renderer
npm install vue-node-renderer

You'll need to have the following in your app package.json for this module to work:

• webpack >=2.1
• vue >=2.1
• vue-template-compiler >=2.1

Usage

Let's say you have this vue component:

<template>
	<div>Hello {{msg}}</div>
</template>

<script>
export default {
	props: ['msg']
};
</script>

You can render with the following:

const Render = require('vue-node-renderer');
Render('./test.vue', {msg:'from props'}).then(result => {
	// should be <div>Hello from props</div>
	console.log(result.body);
});

The Promise returned will contain the following properties:

• body the HTML body of the render component
• vm the Vue instance
• component the Vue component class
• el shortcut to the vue instance element

Canvas Support

If your Vue component renders to the element, make sure you install the node-canvas module.

For example:

<template>
	<canvas width="150" height="200"></canvas>
</template>

<script>
export default {
	mounted() {
		// reference our DOM element
		const canvas = this.$el;
		// draw a couple of boxes into the canvas
		const ctx = canvas.getContext('2d');
		ctx.fillStyle = 'rgb(200,0,0)';
		ctx.fillRect(10, 10, 50, 50);
		ctx.fillStyle = 'rgba(0, 0, 200, 0.5)';
		ctx.fillRect(30, 30, 50, 50);
	}
}
</script>

Now you can render the canvas to a PNG:

const Render = require('vue-node-renderer');
Render('./test.vue', {msg:'from props'}).then(result => {
	// should be data url to the PNG
	const url = result.el.toDataURL('image/png');
	console.log(url);
	// convert it to a Node Buffer so you can save it to a file, etc.
	const buf = new Buffer(url.substring('data:image/png;base64,'.length), 'base64');
});

Customizing the Webpack config

You can customize the Webpack loader used to render your files.

Say you have a PNG and you want to require it in your Vue component:

<template>
	<img :src="img"></img>
</template>

<script>
import circle from './circle.png';
export default {
	computed: {
		img() {
			return circle;
		}
	}
};
</script>

You can pass a custom loader to render as a 3rd argument:

const config = {
	module: {
		loaders: [
			{
				test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
				loader: 'url-loader'
			}
		]
	}
};
Render(fn, null, config).then(result => {
	// should be <img src="data:image/png;base64,iVBORw0KGgoA .........
	console.log(result.body);
});

Contributions

Pull requests welcome and encouraged. I've only tested this minimally and am using with my own project.

Credits

The vue-loader project was helpful in understanding how to load vue files via webpack on the fly. I also have a sample project that inspired this module called example-vue-jsdom-canvas.

License

MIT