```
Detail in [Full example](https://github.com/leaves4j/vue-easy-renderer/tree/master/example)
## API
**vueRender(path,data,config)**
Use `ctx.vueRender()` in koa.js or `res.vueRender()` in express
| Param | Type | Description |
| --- | --- | --- |
| path | `String` | `*.vue` file path base on [`Options.basePath`](#renderer-options) |
| data | `Object` | render data, will be merged into vue instance `data`|
| [config] | `Object` | renderer config |
| [config.pure] | `Boolean` | default `false`, `pure:true` will render `*.vue` file without head and tail
## Renderer Options
**vueEasyRenderer(basePath,options)**
With `Koa.js 2`
```js
const vueEasyRenderer = require('vue-easy-renderer').koaRenderer;
const renderer = vueEasyRenderer(bastPath, options);
```
With `Express.js`
```js
const vueEasyRenderer = require('vue-easy-renderer').connectRenderer;
const renderer = vueEasyRenderer(bastPath, options);
```
**Options**
| Param | Type | Description |
| --- | --- | --- |
| basePath | `string` | `*.vue` file base path |
| [options] | `Object` | renderer options |
| [options.plugins] | `Array` | vue plugins, e.g. `[vueRouter]`, it also support using plugin path string, e.g. `[path.resolve('../app/resource.js')]` |
| [options.preCompile] | `Array` | pre-compile `*.vue` file list |
| [options.head] | `Object` | common html head config see detail in [Component Head](#component-head) |
| [options.compilerConfig] | `Object` | server-side compiler webpack config, default config use `vue-loader` with `css-loader` and `babel-loader`|
| [options.onError] | `Function` | error handler|
| [options.onReady] | `Function` | ready event handler, renderer will emit an event when completed the work of initialization|
| [options.global] | `Object` | global variables, these variables will be injected into context of the vue rendering sandbox, just like global.xx in node or window.xx in browser|
## Vue Client Plugin
We can set the render data to vue instance `data` with the client plugin
Base usage
```js
import Vue from 'vue';
import vueEasyRenderer from 'vue-easy-renderer/lib/plugins/client';
import App from './app.vue';
Vue.use(vueEasyRenderer);
const app = new Vue(App);
app.$mount('#app');
```
## Component Head
We can set head in component
```html
hello {{world}}
```
Then the result
```html
hello
hello world!
```
## vuex or vue-router
When using vuex or vue-router in server-side rendering, we need to create a vuex or vue-router instance for each request, so when you inject a vuex or vue-router instance into a component, you need to add a factory function to the instance , The function will return an instance when called, the default method is named `$ ssrInstance`, such as:
**vuex**
```js
const options = {
state: {
hello: 'world!'
}
};
const store = new Vuex(options);
store.$ssrInstance = () => new Vuex(options);
export default store;
```
**vue-router**
```js
const options = {
mode: 'history',
routes: [
{ path: '/user/:id', component: User }
]
})
const router = new VueRouter(options)
router.$ssrInstance = () => new Vuex(options);
export default router;
```
If you use `vue-router` in server rendering, you need to set `mode` to `history`
## ChangeLog
[ChangeLog](https://github.com/leaves4j/vue-easy-renderer/blob/master/CHANGELOG.md)
## License
MIT