Skip to content

easy-team/egg-view-vue-ssr

Repository files navigation

egg-view-vue-ssr

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

Vue Server Side Render Plugin for Egg.

Feature

Install

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

Document

https://www.yuque.com/easy-team/egg-vue

Usage

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

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,
 // fallbackToClient: true, // fallback to client rendering after server rendering failed
 // afterRender: (html, ctx) => {
 //   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
  • viewEngine egg-view render engine, only valid when renderAsset rendering,default nunjucks
  • 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

when server render bundle error, will try client render**

https://www.yuque.com/easy-team/egg-vue/node

// controller/home.js
exports.index = function* (ctx) {
  yield ctx.render('index/index.js', { message: 'egg vue server side render'});
};

Server Render, Call renderToHtml

when server render bundle error, will try client render**

https://www.yuque.com/easy-team/egg-vue/node

// controller/home.js
exports.index = function* (ctx) {
  const html = yield ctx.renderToHtml('index/index.js', { message: 'egg vue server side render'});
  // you can process html
  ctx.body = html;
};

Client Render, Call renderClient, Use Vue render layout

https://www.yuque.com/easy-team/egg-vue/web

when client render, render layout exports.vuessr.layout by Vue

// controller/home.js
exports.client = function* (ctx) {
  yield ctx.renderClient('index/index.js',{ message: 'egg vue client render'});
};

Asset Render, Call renderAsset, Use render layout by viewEngine, default nunjucks

https://www.yuque.com/easy-team/egg-vue/asset

  • when asset render, you can render layout exports.vuessr.layout by viewEngine, default use egg-view-nunjucks
  • you must install the specified engine dependence, such as egg-view-nunjucks or egg-view-ejs
  • The context provides an asset object that can get js, css, state information. layout template

use default viewEngine nunjucks

// controller/home.js
exports.asset = function* (ctx) {
  yield ctx.renderAsset('index/index.js', { message: 'egg vue asset render'});
};

scope render viewEngine config

// controller/home.js
exports.asset = function* (ctx) {
  yield ctx.renderAsset('index/index.js', { message: 'egg vue asset render'}, { viewEngine: 'ejs' });
};

Questions & Suggestions

Please open an issue here.

License

MIT