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:
Hello {{msg}}
You can render with the following:
const Render = ;;
The Promise returned will contain the following properties:
body
the HTML body of the render componentvm
the Vue instancecomponent
the Vue component classel
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:
Now you can render the canvas to a PNG:
const Render = ;;
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:
You can pass a custom loader to render as a 3rd argument:
const config = module: loaders: test: /\.?$/ loader: 'url-loader' ;;
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