vue-easy-renderer
vue-easy-renderer
is a server-side rendering framework based on vue-server-renderer
, which provides a simpler way to implement vue server rendering, including Koa.js
and Express.js
plugin.
- Installation
- Example
- API
- Renderer Options
- Vue Client Plugin
- Component Head
- vuex or vue-router
- ChangeLog
- License
Installation
npm install vue-easy-renderer -S
Peer Dependency
npm i vue vuex vue-router vue-loader vue-server-renderer -S
Example
Vue File
Create the vue file in component/hello_word/hello_word.vue
hello {{world}}
Koa.js 2
'use strict'; const path = ;const Koa = ;const serve = ;const vueEasyRenderer = koaRenderer; const renderer = ;const app = ; app;app; // with ES7 async/await// app.use(async ctx => {// await ctx.vueRender('simple.vue', {hello: 'world!'});// }); app; app; console;moduleexports = app;
Express.js
'use strict'; const path = ;const express = ;const vueEasyRenderer = connectRenderer; const renderer = ;const app = ; app;app; app; app; console;moduleexports = app;
Result
The browser get the html:
hello world!
Detail in Full 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 |
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
const vueEasyRenderer = koaRenderer;const renderer = ;
With Express.js
const vueEasyRenderer = connectRenderer;const renderer = ;
Options
Param | Type | Description |
---|---|---|
basePath | string |
*.vue file base path |
[options] | Object |
renderer options |
[options.plugins] | Array<Object\|string> |
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 |
[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
;;; Vue;const app = App;app;
Component Head
We can set head in component
hello {{world}}
Then the result
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
const options = state: hello: 'world!' ; const store = options;store options;;
vue-router
const options = mode: 'history' routes: path: '/user/:id' component: User ) const router = optionsrouter options;;
If you use vue-router
in server rendering, you need to set mode
to history
ChangeLog
License
MIT