{"id":13607563,"url":"https://github.com/bistroo/vue-ssr","last_synced_at":"2025-04-12T14:30:36.446Z","repository":{"id":160299931,"uuid":"635203718","full_name":"bistroo/vue-ssr","owner":"bistroo","description":"Minimalistic wrapper to develop and run SSR Vue apps 🔗","archived":true,"fork":false,"pushed_at":"2024-02-27T12:02:53.000Z","size":106,"stargazers_count":12,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-03-17T05:47:05.916Z","etag":null,"topics":["hmr-support","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/bistroo.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}},"created_at":"2023-05-02T07:32:14.000Z","updated_at":"2024-09-11T10:37:09.000Z","dependencies_parsed_at":"2024-01-07T18:06:43.403Z","dependency_job_id":"fa5df64c-b274-455d-ba65-5816a305ee14","html_url":"https://github.com/bistroo/vue-ssr","commit_stats":null,"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bistroo%2Fvue-ssr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bistroo%2Fvue-ssr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bistroo%2Fvue-ssr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bistroo%2Fvue-ssr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bistroo","download_url":"https://codeload.github.com/bistroo/vue-ssr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248580990,"owners_count":21128087,"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","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":["hmr-support","ssr","vite","vue"],"created_at":"2024-08-01T19:01:19.713Z","updated_at":"2025-04-12T14:30:36.109Z","avatar_url":"https://github.com/bistroo.png","language":"TypeScript","funding_links":[],"categories":["Plugins","SSR"],"sub_categories":["Libraries"],"readme":"# SSR for Vue\n\nMinimalistic wrapper to run SSR Vue apps, based on Vite\n\n## Features\n* HMR support\n* Vue Router\n* State management\n* Teleports\n* Document head management (powered by [@vueuse/head](https://github.com/vueuse/head))\n\n## Quick Setup\n\n### Installation\n\n```sh\npnpm install @bistroo/vue-ssr -D\n```\n\nAdd the following scripts\n\n```json\n\"scripts\": {\n  \"dev\": \"vue-ssr\",\n  \"build\": \"vue-ssr build\",\n  \"start\": \"vue-ssr start\"\n},\n```\n\n\u003e The `vue-ssr` command creates a dev server with HMR enabled.\nTo create a production ready build, use `vue-ssr build`. After creating a build, use `vue-ssr start` to serve the build with Express.\n\n### Configuration\n\nCreate a vue-ssr.config.ts\n\n```typescript\nimport { defineConfig } from '@bistroo/vue-ssr'\nimport { fileURLToPath } from 'node:url'\n\nexport default defineConfig({\n  vite: {\n    resolve: {\n      alias: {\n        '@': fileURLToPath(new URL('./src', import.meta.url)),\n      },\n    },\n  },\n})\n```\n\n\u003e Use the `vite` property with caution.\n\n### Usage\n\n```ts\nimport { vueSSR } from '@bistroo/vue-ssr'\n\nimport App from '@/App.vue'\n\nconst Counter = () =\u003e import('@/Counter.vue')\n\nconst routes = [\n  {\n    path: '/',\n    name: 'counter',\n    component: Counter,\n  }\n]\n\nexport default vueSSR(App, { routes })\n```\n\nThe `main.ts` file should export the imported vueSSR function.\n\nPinia is supported by using the `app` and `state` property inside the callback.\n\n```typescript\nexport default vueSSR(App, { routes }, ({ app, state }) =\u003e {\n  const pinia = createPinia()\n\n  app.use(pinia)\n\n  if (import.meta.env.SSR) {\n    state.value = pinia.state.value\n  } else {\n    pinia.state.value = state.value\n  }\n})\n```\n\n\u003e The state will be persisted on `window.__INITIAL_STATE__` property and serialized using `@nuxt/devalue`\n\nIt's possible to make changes to the router, use the `router` property in the callback.\n\n```typescript\nexport default vueSSR(App, { routes }, ({ router }) =\u003e {\n  router.beforeEach(async (to, from) =\u003e {\n    if (\n      !isAuthenticated \u0026\u0026\n      to.name !== 'Login'\n    ) {\n      return { name: 'Login' }\n    }\n  })\n})\n```\n\nThe Express request and response objects are accessible from the callback. Make sure to wrap them in `import.meta.env.SSR`.\n\n```typescript\nexport default vueSSR(App, { routes }, ({ request, response }) =\u003e {\n  if (import.meta.env.SSR) {\n    console.log(request?.originalUrl)\n  }\n})\n```\n\nOr use `useSSRContext`.\n\n```typescript\nconst { request, response } = useSSRContext()\n\nif (import.meta.env.SSR) {\n  console.log(request?.originalUrl)\n}\n```\n\nUsing Teleport is supported, but requires a little bit of setup. Targeting `body` is not supported, use `#teleports` instead.\n\n\n```html\n\u003ctemplate\u003e\n  \u003cTeleport to=\"#teleports\"\u003e\n    \u003cbutton @click=\"store.increment\"\u003eIncrement\u003c/button\u003e\n  \u003c/Teleport\u003e\n\u003c/template\u003e\n```\n\nDuring SSR, the Teleport component will be rendered as a `div` with the `id` set to the `to` property.\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbistroo%2Fvue-ssr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbistroo%2Fvue-ssr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbistroo%2Fvue-ssr/lists"}