{"id":31227461,"url":"https://github.com/krmax44/vue-ssr-service","last_synced_at":"2026-03-06T12:03:09.491Z","repository":{"id":312762890,"uuid":"957594484","full_name":"krmax44/vue-ssr-service","owner":"krmax44","description":"Vue Server-Side Rendering everywhere – no matter your stack.","archived":false,"fork":false,"pushed_at":"2025-05-29T14:47:19.000Z","size":174,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-25T23:45:26.148Z","etag":null,"topics":["microservice","server-side-rendering","ssr","vite","vue"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/krmax44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-03-30T18:40:29.000Z","updated_at":"2025-05-29T16:09:12.000Z","dependencies_parsed_at":"2025-09-01T22:10:20.103Z","dependency_job_id":null,"html_url":"https://github.com/krmax44/vue-ssr-service","commit_stats":null,"previous_names":["krmax44/vue-ssr-service"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/krmax44/vue-ssr-service","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krmax44%2Fvue-ssr-service","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krmax44%2Fvue-ssr-service/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krmax44%2Fvue-ssr-service/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krmax44%2Fvue-ssr-service/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/krmax44","download_url":"https://codeload.github.com/krmax44/vue-ssr-service/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/krmax44%2Fvue-ssr-service/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30175907,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-06T11:48:51.886Z","status":"ssl_error","status_checked_at":"2026-03-06T11:48:51.460Z","response_time":250,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["microservice","server-side-rendering","ssr","vite","vue"],"created_at":"2025-09-22T04:19:36.083Z","updated_at":"2026-03-06T12:03:09.451Z","avatar_url":"https://github.com/krmax44.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue SSR service\n\n[![NPM Version](https://img.shields.io/npm/v/vue-ssr-service)](https://www.npmjs.com/package/vue-ssr-service)\n\nA fast microservice to render server-side render Vue components. It's designed for use with non-JavaScript web servers, such as Django, Ruby on Rails etc. Works great with Vite.\n\n\u003e [!WARNING]\n\u003e This project is in a proof-of-concept state.\n\n## Getting started with Vite\n\nLet's assume we have a basic, slow feeling Vue SPA app, with a root component like so.\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref, onMounted } from \"vue\";\n\nconst name = ref(\"\");\n\nonMounted(() =\u003e {\n  // get the name of the current user via api\n  name.value = await fetchNameFromServer();\n});\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cp\u003eHello, {{ name }}\u003c/p\u003e\n\u003c/template\u003e\n```\n\nFirst, we'll have to adapt the Vite configuration a little:\n\n```ts\nimport { resolve } from \"node:path\";\nimport { defineConfig } from \"vite\";\nimport vue from \"@vitejs/plugin-vue\";\nimport { ssrPlugin } from \"vue-ssr-service/vite\";\n\nexport default defineConfig({\n  // the ssrPlugin is only used during development\n  plugins: [vue(), ssrPlugin()],\n  build: {\n    manifest: \"manifest.json\", // required to load the built assets in production\n    rollupOptions: {\n      input: {\n        // heads-up: Vite will no longer scan the index.html for entries\n        // make sure to include all your entrypoints here\n        myApp: resolve(\"./myApp.ts\"),\n      },\n    },\n  },\n  environments: {\n    client: {\n      build: {\n        outDir: resolve(\"dist\", \"client\"),\n      },\n    },\n    ssr: {\n      build: {\n        outDir: resolve(\"dist\", \"server\"),\n        ssr: true,\n      },\n    },\n  },\n});\n```\n\nAlso, we'll have to adapt the main entry file. Right now, it probably looks something like this:\n\n```ts\nimport { createApp } from \"vue\";\nimport MyApp from \"./MyApp.vue\";\n\nconst app = createApp(MyApp);\napp.use(/* i.e. pinia */);\napp.mount(\"#app\");\n```\n\nWe'll change it as follows:\n\n```ts\nimport { VueSSRApp } from \"vue-ssr-service/entry\";\nimport MyApp from \"./components/MyApp.vue\";\n\n// vue-ssr-service will grab this export to render it!\nexport const ssrApp = new VueSSRApp(MyApp, (app) =\u003e {\n  app.use(/* ... */);\n});\n\nssrApp.mount(\"#app\");\n```\n\nLet's update the component. It will receive the name directly as a prop from the server. No more need for an API call, the app loads instantly!\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\ndefineProps\u003c{ name: string }\u003e();\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cp\u003eHello, {{ $props.name }}\u003c/p\u003e\n\u003c/template\u003e\n```\n\nNow, let's adjust the `build` command, and then build the app using `npm run build`:\n\n```diff\n// package.json\n{\n  \"scripts\": {\n-   \"build\": \"vite build\"\n+   \"build\": \"npm run build:client \u0026\u0026 npm run build:server\",\n+   \"build:client\": \"vite build\",\n+   \"build:server\": \"vite build --ssr\"\n  }\n}\n```\n\nWhich will create a folder structure like this:\n\n```\ndist\n│\n└───client\n│   │   manifest.json\n│   └───assets\n│       │   myApp.js\n│       │   myApp.css\n│\n└───server\n│   │   manifest.json\n│   │   myApp.js\n```\n\nNow, start the `vue-ssr-service` server by pointing it to the server's manifest file:\n\n```sh\n$ vue-ssr-service ./path/to/dist/server/manifest.json\n\nServer running at http://127.0.0.1:3123\n```\n\nLet's see if it works:\n\n```sh\n$ curl \"localhost:3123/render\" \\\n    -d '{\"entryName\": \"myApp\", \"props\": { \"name\":\"friend\" } }' \\\n    -X POST \\\n    -H \"Content-Type: application/json\"\n\n\u003cp\u003eHello, friend!\u003c/p\u003e\n```\n\nNext, take a look at integrating it into your backend.\n\n## Integrating into a backend\n\nFirst, your backend needs to be able to serve the assets built by Vite, i.e. include the scripts and styles in the HTML templates. During development, it's also nice to have Vite's Hot Module Replacement script included. There possibly are tools for your web framework already out there to help you with this, for example [django-vite](https://github.com/MrBin99/django-vite).\n\nNext, the backend views need to be connected to `vue-ssr-service`, i.e. request the server-side rendered app with the corresponding props. Your view template might roughly look like this:\n\n```html\n\u003cscript src=\"./path/to/myapp.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"app\"\u003e\u003c/div\u003e\n\n\u003c!-- myapp.js will mount to #app --\u003e\n```\n\nIt will have to be adapted in two ways:\n\n1. A `\u003cscript type=\"application/json\"\u003e` element containing JSON serialized data, including props, needs to be added as the first child of the root element. If there are no props to pass, it may be omitted.\n2. The backend requests the SSR-rendered app from `vue-ssr-service` and inserts the resulting HTML right after.\n\n\u003e [!IMPORTANT]\n\u003e Make sure not to add any whitespace, as it may interfere with hydration.\n\n\u003e [!TIP]\n\u003e For better performance, cache the rendered HTML – being aware of the implications.\n\n```html\n\u003cscript src=\"./path/to/myapp.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003c!-- whitespace added for readability - all whitespace needs to be removed to hydrate properly though! --\u003e\n  \u003cscript type=\"application/json\"\u003e\n    { \"props\": { \"name\": \"friend\" } }\n  \u003c/script\u003e\n  \u003cp\u003eHello, friend!\u003c/p\u003e\n\u003c/div\u003e\n\n\u003c!-- myapp.js will hydrate #app --\u003e\n```\n\n### Error Handling\n\nShould `vue-ssr-service` not be able to render the app, `forceClientRender` in the JSON props should be set to `true`. The client will then mount the app as if it was not in SSR mode.\n\n\u003e [!WARNING]\n\u003e Client re-renders may come at a performance penalty. Make sure to carefully monitor for any SSR errors.\n\n```html\n\u003cscript src=\"./path/to/myapp.js\"\u003e\u003c/script\u003e\n\n\u003cdiv id=\"app\"\u003e\n  \u003cscript type=\"application/json\"\u003e\n    { \"props\": { \"name\": \"friend\" }, \"forceClientRender\": true }\n  \u003c/script\u003e\n  \u003c!-- oops, ssr failed! --\u003e\n\u003c/div\u003e\n```\n\n## Installation\n\nWith Bun or Node.js:\n\n```sh\ngit clone https://github.com/krmax44/vue-ssr-service\n\nbun install\nbun start\n\n# or:\nnpm install\nnpm start\n```\n\nWith Docker: (coming soon)\n\n## Usage\n\n### CLI\n\n```\nUsage: vue-ssr-service [options] [command] \u003cmanifest\u003e\n\nService to render Vue components to HTML\n\nArguments:\n  manifest                  Path to the server manifest.json file\n\nOptions:\n  -p, --port \u003cnumber\u003e       Port to run the server on (default: \"3123\")\n  -h, --host \u003cstring\u003e       Host to run the server on (default: \"127.0.0.1\")\n  -s, --socket \u003cstring\u003e     Socket to run the server on (overrides host and port) (default: \"\")\n  -V, --version             output the version number\n  --help                    display help for command\n\nCommands:\n  render [options] \u003centry\u003e  Renders to stdout and exits.\n```\n\n### API\n\n**POST `/render`**:\n\nRequest body (JSON):\n\n- `entryName`: Either name or filename of the entry (`src`/`file` key in `manifest.json`)\n- `props`: Data which will be passed as props to the root component\n\nResponse:\n\n- The rendered component as HTML.\n\n## Related Projects\n\n- [Python/Django client](https://github.com/krmax44/vue-ssr-python/) for `vue-ssr-service`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrmax44%2Fvue-ssr-service","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkrmax44%2Fvue-ssr-service","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkrmax44%2Fvue-ssr-service/lists"}