egg-view-vue-ssr

    3.3.3 • Public • Published

    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

    Install

    npm i egg-view-vue-ssr

    DownloadsWeekly Downloads

    199

    Version

    3.3.3

    License

    MIT

    Unpacked Size

    25.2 kB

    Total Files

    11

    Last publish

    Collaborators

    • hubcarl