Skip to content

Latest commit

 

History

History
141 lines (110 loc) · 4.38 KB

README.md

File metadata and controls

141 lines (110 loc) · 4.38 KB

egg-view-vue-ssr

NPM version build status Test coverage David deps Known Vulnerabilities npm download

vue server side render solution for egg.

  • support vue server side render and static resource inject html
  • support vue server side render error, auto try client render

Install

$ npm i egg-view-vue-ssr --save

Usage

// {app_root}/config/plugin.js
exports.vuessr = {
  enable: true,
  package: 'egg-view-vue-ssr',
};

Version

1.x.x-2.x.x

egg-view-vue-ssr depends on egg-view-vue plugin

3.x.x

  • 3.x.x(egg-view-vue-ssr) no longer depends on egg-view-vue plugin, egg-view-vue-ssr has an independent function that can run on its own

  • vue and vue-server-renderer are not inside in plugin dependence

Configuration

// {app_root}/config/config.default.js
exports.vuessr = {
 // layout: path.join(app.baseDir, 'app/view/layout.html'),
 // manifest: path.join(app.baseDir, 'config/manifest.json'),
 // injectCss: true,
 // injectJs: true,
 // injectRes: []
 // fallbackToClient: true, // fallback to client rendering after server rendering failed
 // afterRender: (html, context) => {
 //   return html;
 // },
};
  • doctype: {String} html content will auto add <!doctype html>, you can set doctype: ''
  • layout: {String} client render template, support renderString compile
  • manifest: {Object} static resource dependence, the content such as:
{
  "app/app.js": "/public/js/app/app.js",
  "vendor.js": "/public/js/vendor.js",
  "deps": {
    "app/app.js": {
      "js": [
        "/public/js/vendor.js",
        "/public/js/app/app.js"
      ],
      "css": [
        "/public/css/vendor.css",
        "/public/css/app.css"
      ]
    }
  }
}
  • injectCss: {Boolean} whether inject href css, default true
  • injectJs: {Boolean} whether inject src script, default true
  • injectRes: {Boolean} inline/inject css or js to file head or body. include location and src config inline {Boolean} true or false, default false location {String} headBefore, headAfter, bodyBefore, bodyAfter insert location, default headBefore url {String} inline file absolution path
  • mergeLocals {Boolean} whether merge ctx locals to data, default true
  • crossorigin: {Boolean} js cross domain support for cdn js error catch, default false
  • fallbackToClient: {Boolean} fallback to client rendering if server render failed, default true
  • cache: lru-cache options @see https://www.npmjs.com/package/lru-cache
  • renderOptions: @see https://ssr.vuejs.org/en/api.html#renderer-options
  • afterRender: afterRender hook html after render

Render

Server Render, call render method

Note: when server render bundle error, will try client render

// controller/home.js
exports.index = function* (ctx) {
  yield ctx.render('index/index.js', Model.getPage(1, 10));
};

Client Render, Call renderClient or build static html to egg-static dir by Webpack.

when client render , the template is exports.vuessr.layout

// controller/home.js
exports.client = function* (ctx) {
  yield ctx.renderClient('index/index.js', Model.getPage(1, 10));
};

see config/config.default.js for more detail.

Questions & Suggestions

Please open an issue here.

License

MIT