{"id":13536279,"url":"https://github.com/leaves4j/vue-easy-renderer","last_synced_at":"2025-08-10T06:35:56.887Z","repository":{"id":57395717,"uuid":"79916708","full_name":"leaves4j/vue-easy-renderer","owner":"leaves4j","description":"Vue.js server-side renderer for *.vue file with Node.js.","archived":false,"fork":false,"pushed_at":"2017-11-08T01:41:36.000Z","size":300,"stargazers_count":80,"open_issues_count":1,"forks_count":12,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-28T20:11:36.512Z","etag":null,"topics":["vue","vue-renderer","vue-server-renderer"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leaves4j.png","metadata":{"files":{"readme":"README-zh.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-24T14:02:32.000Z","updated_at":"2023-09-08T17:19:51.000Z","dependencies_parsed_at":"2022-09-16T12:00:17.763Z","dependency_job_id":null,"html_url":"https://github.com/leaves4j/vue-easy-renderer","commit_stats":null,"previous_names":[],"tags_count":38,"template":false,"template_full_name":null,"purl":"pkg:github/leaves4j/vue-easy-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leaves4j%2Fvue-easy-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leaves4j%2Fvue-easy-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leaves4j%2Fvue-easy-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leaves4j%2Fvue-easy-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leaves4j","download_url":"https://codeload.github.com/leaves4j/vue-easy-renderer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leaves4j%2Fvue-easy-renderer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269687927,"owners_count":24459389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["vue","vue-renderer","vue-server-renderer"],"created_at":"2024-08-01T09:00:36.693Z","updated_at":"2025-08-10T06:35:56.845Z","avatar_url":"https://github.com/leaves4j.png","language":"JavaScript","funding_links":[],"categories":["服务端","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","JavaScript"],"sub_categories":["Development Tools"],"readme":"vue-easy-renderer\n---\n`vue-easy-renderer` 是一个基于 `vue-server-renderer` 的服务端渲染工具, 他提供了更简单的方式来实现vue的服务端渲染， 包括 `Koa.js` 和 `Express.js` 的插件.\n\n  - [Installation](#installation)\n  - [Example](#example)\n  - [API](#api)\n  - [Renderer 选项](#renderer-选项)\n  - [Vue Client Plugin](#vue-client-plugin)\n  - [Component Head](#component-head)\n  - [vuex or vue-router](#vuex-or-vue-router)\n  - [ChangeLog](#changelog)\n  - [License](#license)\n\n## Installation\n\n```bash\nnpm install vue-easy-renderer -S\n```\n\nPeer Dependency\n\n```bash\nnpm i vue vuex vue-router vue-loader vue-server-renderer -S\n```\n\n## Example\n\n**Vue File**\n\n创建一个文件 `component/hello_word/hello_word.vue`\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003ehello {{world}}\u003c/div\u003e\n\u003c/template\u003e\n\u003cstyle scoped\u003e\n\u003c/style\u003e\n\u003cscript\u003e\n  export default {\n    name: 'HelloWorld',\n    data() {\n      return {\n        world: ''\n      };\n    }\n  }\n\u003c/script\u003e\n```\n\n**Koa.js 2**\n\n```js\n'use strict';\n\nconst path = require('path');\nconst Koa = require('koa');\nconst serve = require('koa-static');\nconst vueEasyRenderer = require('vue-easy-renderer').koaRenderer;\n\nconst renderer = vueEasyRenderer(path.resolve(__dirname, './component'));\nconst app = new Koa();\n\napp.use(serve('./dist'));\napp.use(renderer);\n\n// with ES7 async/await\n// app.use(async ctx =\u003e {\n//   await ctx.vueRender('simple.vue', {hello: 'world!'});\n// });\n\napp.use(ctx =\u003e ctx.vueRender('hello_world/hello_world.vue', {world: 'world!'}));\n\napp.listen(8080);\n\nconsole.log('vue-easy-renderer koa example start in 127.0.0.1:8080');\nmodule.exports = app;\n\n```\n\n**Express.js**\n\n```js\n'use strict';\n\nconst path = require('path');\nconst express = require('express');\nconst vueEasyRenderer = require('vue-easy-renderer').connectRenderer;\n\nconst renderer = vueEasyRenderer(path.resolve(__dirname, './component'));\nconst app = express();\n\napp.use(express.static('./dist'));\napp.use(renderer);\n\napp.get('/', (req, res) =\u003e res.vueRender('hello_world/hello_world.vue', {world: 'world!'}));\n\napp.listen(8081);\n\nconsole.log('vue-easy-renderer express example start in 127.0.0.1:8081');\nmodule.exports = app;\n\n```\n\n**Result**\n\n最后浏览器获取到的html\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n \u003cscript\u003ewindow.__VUE_INITIAL_STATE__ = {\"world\":\"world!\"};\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv server-rendered=\"true\" data-v-30ca8d89\u003ehello world!\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nDetail in [Full example](https://github.com/leaves4j/vue-easy-renderer/tree/master/example)\n\n## API\n\n**vueRender(path,data,config)**\n\n在 `koa.js` 中 `vueRender`挂载在`ctx`上，即 `ctx.vueRender()`，在`express.js`中挂载在`res`上，即 `res.vueRender()`\n\n| 参数          | 类型                                                                                | 描述                                                   |\n| ------------- | ----------------------------------------------------------------------------------- | ------------------------------------------------------ |\n| path          | `String` | `*.vue` 基于 [`Options.basePath`](#renderer-options) 的路径              |\n| data          | `Object`                                                                            | 渲染数据，将会被合并到vue实例的data中或者vuex的state中 |\n| [config]      | `Object`                                                                            | 渲染选项                                               |\n| [config.pure] | `Boolean` | 默认 `false`, 当设置为`pure:true`时，将会只渲染vue文件的html,不包含头尾 |\n## Renderer 选项\n\n**vueEasyRenderer(basePath,options)**\n\n获取 vueEasyRenderer\n\nWith `Koa.js 2`\n\n```js\nconst vueEasyRenderer = require('vue-easy-renderer').koaRenderer;\nconst renderer = vueEasyRenderer(basePath, options);\n```\n\nWith `Express.js`\n\n```js\nconst vueEasyRenderer = require('vue-easy-renderer').connectRenderer;\nconst renderer = vueEasyRenderer(basePath, options);\n```\n\n**参数**\n\n| 参数                     | 类型                                                                                                                                                    | 描述                                                                                                             |\n| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |\n| basePath                 | `string` | `*.vue` 文件路径                                                                                                                             |\n| [options]                | `Object`                                                                                                                                                | renderer 的 options                                                                                              |\n| [options.plugins]        | `Array\u003cObject\\|string\u003e` | vue插件, 如 `[vueRouter]`, 同时也支持字符串，如： `[path.resolve('../app/resource.js')]` |\n| [options.preCompile]     | `Array` | 需要预编译的 `*.vue` 文件路径列表，如：`['test.vue']`                                                                                         |\n| [options.head]           | `Object`                                                                                                                                                | 通用的html头部设置， 详情见 [Component Head](#component-head)                                                    |\n| [options.compilerConfig] | `Object` | 服务端vue文件的编译器配置，为webpack配置文件，默认配置使用 `vue-loader`、 `babel-loader`                                                     |\n| [options.onError]        | `Function`                                                                                                                                              | 异常处理方法                                                                                                     |\n| [options.onReady]        | `Function`                                                                                                                                              | ready 时间处理方法, renderer 将会在完成初始化工作之后emit一个ready事件                                           |\n| [options.global]         | `Object`                                                                                                                                                | 全局变量, 这些全局变量将会被注入的vue服务端渲染时的sandbox的作用域，相当于node中的global.xx，浏览器中的window.xx |\n\n\n## Vue Client Plugin\n\n服务端渲染完成后，我们需要把数据注入到浏览器中vue/vuex实例中，需要借助于客户端的插件\n\nBase usage\n\n```js\nimport Vue from 'vue';\nimport vueEasyRenderer from 'vue-easy-renderer/lib/plugins/client';\nimport App from './app.vue';\n\nVue.use(vueEasyRenderer);\nconst app = new Vue(App);\napp.$mount('#app');\n```\n\n## Component Head\n\n我们可以在组件中设置html的头部\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"app\" class=\"hello\"\u003ehello {{world}}\u003c/div\u003e\n\u003c/template\u003e\n\u003cstyle scoped\u003e\n\u003c/style\u003e\n\u003cscript\u003e\n\n  export default {\n    name: 'HelloWorld',\n    data() {\n      return {\n        world: ''\n      };\n    },\n    head: {\n      title: 'hello',\n      script: [\n        {src: \"/hello_world.js\", async: 'async'}\n      ],\n      link: [\n        { rel: 'stylesheet', href: '/style/hello_world.css' },\n      ]\n    },\n  }\n\u003c/script\u003e\n```\n\nThen the result\n\n```html\n\u003chtml\u003e\n\u003chead\u003e\n \u003ctitle\u003ehello\u003c/title\u003e\n \u003clink rel=\"stylesheet\" href=\"/style/hello_world.css\"/\u003e\n \u003cscript\u003ewindow.__VUE_INITIAL_STATE__ = {\"world\":\"world!\"};\u003c/script\u003e\n \u003cscript src=\"/hello_world.js\" async=\"true\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\" server-rendered=\"true\" class=\"hello\" data-v-035d6643\u003ehello world!\u003c/div\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## vuex or vue-router\n\n在服务端渲染中使用vuex或者vue-router时，我们需要为每个请求创建一个vuex或者vue-router实例，因此在\b跟组件注入vuex或者vue-router实例时，需要在实例上添加一个工厂方法，该方法调用时返回一个实例，默认方法名为`$ssrInstance`，如:\n\n**vuex**\n\n```js\nconst options = {\n  state: {\n    hello: 'world!'\n  }\n};\n\nconst store = new Vuex(options);\nstore.$ssrInstance = () =\u003e new Vuex(options);\nexport default store;\n```\n\n**vue-router**\n\n```js\nconst options = {\n  mode: 'history',\n  routes: [\n    { path: '/user/:id', component: User }\n  ]\n})\n\nconst router = new VueRouter(options)\nrouter.$ssrInstance = () =\u003e new Vuex(options);\nexport default router;\n```\n如果在服务端渲染中使用`vue-router`，需要设置`mode`为`history`\n\n\n\n## ChangeLog\n\n[ChangeLog](https://github.com/leaves4j/vue-easy-renderer/blob/master/CHANGELOG.md)\n\n## License\n\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleaves4j%2Fvue-easy-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleaves4j%2Fvue-easy-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleaves4j%2Fvue-easy-renderer/lists"}