{"id":13560940,"url":"https://github.com/posva/unplugin-vue-router","last_synced_at":"2025-05-12T13:27:08.270Z","repository":{"id":40761216,"uuid":"504633412","full_name":"posva/unplugin-vue-router","owner":"posva","description":"Next Generation file based typed routing for Vue Router","archived":false,"fork":false,"pushed_at":"2025-05-12T08:10:11.000Z","size":5008,"stargazers_count":1955,"open_issues_count":34,"forks_count":102,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-12T09:39:37.696Z","etag":null,"topics":["typescript","vite","vue","vue-router"],"latest_commit_sha":null,"homepage":"https://uvr.esm.is","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/posva.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":"posva"}},"created_at":"2022-06-17T18:20:36.000Z","updated_at":"2025-05-12T08:09:23.000Z","dependencies_parsed_at":"2023-09-22T16:21:21.743Z","dependency_job_id":"5915c36e-2d40-4e4e-b9f2-0e5a437011ef","html_url":"https://github.com/posva/unplugin-vue-router","commit_stats":null,"previous_names":[],"tags_count":73,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Funplugin-vue-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Funplugin-vue-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Funplugin-vue-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/posva%2Funplugin-vue-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/posva","download_url":"https://codeload.github.com/posva/unplugin-vue-router/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253746992,"owners_count":21957671,"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":["typescript","vite","vue","vue-router"],"created_at":"2024-08-01T13:00:50.999Z","updated_at":"2025-05-12T13:27:08.246Z","avatar_url":"https://github.com/posva.png","language":"TypeScript","readme":"# unplugin-vue-router\n\n[![NPM version](https://img.shields.io/npm/v/unplugin-vue-router?color=black\u0026label=)](https://www.npmjs.com/package/unplugin-vue-router) [![ci status](https://github.com/posva/unplugin-vue-router/actions/workflows/ci.yml/badge.svg)](https://github.com/posva/unplugin-vue-router/actions/workflows/ci.yml) [![codecov](https://codecov.io/gh/posva/unplugin-vue-router/graph/badge.svg?token=28IvHS7TAx)](https://codecov.io/gh/posva/unplugin-vue-router)\n\n\u003e Automatic file based Routing in Vue with TS support ✨\n\n\u003c!-- https://user-images.githubusercontent.com/664177/176622756-3d10acc6-caac-40ff-a41f-9bdccadf7f1d.mp4 --\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/664177/176623167-0153f9fb-79cd-49a7-8575-429ce323dd11.gif\" \u003e\n\u003c/p\u003e\n\n- [StackBlitz Demo](https://stackblitz.com/github/posva/uvr-demo)\n\nThis build-time plugin simplifies your routing setup **and** makes it safer and easier to use thanks to TypeScript. Requires Vue Router \u003e=4.4.0.\n\n\u003e [!WARNING]\n\u003e While unplugin-vue-router typed routing and file based routing is fundamentally stable, it contains other experimental APIs that are subject to change (e.g. Data Loaders). Make sure to check the relevant [Documentation](https://uvr.esm.is) for the latest information.\n\u003e If you find any issue, design flaw, or have ideas to improve it, please, open open an [issue](https://github.com/posva/unplugin-vue-router/issues/new/choose) or a [Discussion](https://github.com/posva/unplugin-vue-router/discussions).\n\n## Install\n\n```bash\nnpm i -D unplugin-vue-router\n```\n\nAdd VueRouter plugin **before** Vue plugin:\n\n\u003cdetails\u003e\n\u003csummary\u003eVite\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vite.config.ts\nimport VueRouter from 'unplugin-vue-router/vite'\n\nexport default defineConfig({\n  plugins: [\n    VueRouter({\n      /* options */\n    }),\n    // ⚠️ Vue must be placed after VueRouter()\n    Vue(),\n  ],\n})\n```\n\nExample: [`playground/`](./playground/)\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eRollup\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// rollup.config.js\nimport VueRouter from 'unplugin-vue-router/rollup'\n\nexport default {\n  plugins: [\n    VueRouter({\n      /* options */\n    }),\n    // ⚠️ Vue must be placed after VueRouter()\n    Vue(),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eWebpack\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// webpack.config.js\nmodule.exports = {\n  /* ... */\n  plugins: [\n    require('unplugin-vue-router/webpack')({\n      /* options */\n    }),\n  ],\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eVue CLI\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// vue.config.js\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      require('unplugin-vue-router/webpack')({\n        /* options */\n      }),\n    ],\n  },\n}\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eesbuild\u003c/summary\u003e\u003cbr\u003e\n\n```ts\n// esbuild.config.js\nimport { build } from 'esbuild'\nimport VueRouter from 'unplugin-vue-router/esbuild'\n\nbuild({\n  plugins: [VueRouter()],\n})\n```\n\n\u003cbr\u003e\u003c/details\u003e\n\n## Setup\n\nAfter installing, **you should run your dev server** (usually `npm run dev`) **to generate the first version of the types**. Then you need to add the types to your `tsconfig.json`.\n\n```json\n{\n  \"include\": [\n    // ...\n    \"./typed-router.d.ts\"\n  ],\n  // ...\n  \"compilerOptions\": {\n    // ...\n    \"moduleResolution\": \"Bundler\"\n    // ...\n  }\n}\n```\n\nThen, if you have an `env.d.ts` file like the one created by `npm vue create \u003cmy-project\u003e`, add the `unplugin-vue-router/client` types to it:\n\n```ts\n// env.d.ts\n/// \u003creference types=\"vite/client\" /\u003e\n/// \u003creference types=\"unplugin-vue-router/client\" /\u003e\n```\n\nIf you don't have an `env.d.ts` file, you can create one and add the unplugin-vue-router types to it _or_ you can add them to the `types` property in your `tsconfig.json`:\n\n```json\n{\n  \"compilerOptions\": {\n    // ...\n    \"types\": [\"unplugin-vue-router/client\"]\n  }\n}\n```\n\nFinally, import the generated routes from `vue-router/auto-routes` and pass them to the router:\n\n```diff\nimport { createRouter, createWebHistory } from 'vue-router'\n+import { routes } from 'vue-router/auto-routes'\n\ncreateRouter({\n  history: createWebHistory(),\n  // pass the generated routes written by the plugin 🤖\n+  routes,\n})\n```\n\nAlternatively, **you can also import the `routes` array** and create the router manually or pass it to some plugin. Here is an example with [Vitesse starter](https://github.com/antfu-collective/vitesse/blob/main/src/main.ts):\n\n```diff\n import { ViteSSG } from 'vite-ssg'\n import { setupLayouts } from 'virtual:generated-layouts'\n import App from './App.vue'\n import type { UserModule } from './types'\n-import generatedRoutes from '~pages'\n+import { routes } from 'vue-router/auto-routes'\n\n import '@unocss/reset/tailwind.css'\n import './styles/main.css'\n import 'uno.css'\n\n-const routes = setupLayouts(generatedRoutes)\n\n // https://github.com/antfu/vite-ssg\n export const createApp = ViteSSG(\n   App,\n   {\n-   routes,\n+   routes: setupLayouts(routes),\n    base: import.meta.env.BASE_URL\n  },\n   (ctx) =\u003e {\n     // install all modules under `modules/`\n     Object.values(import.meta.glob\u003c{ install: UserModule }\u003e('./modules/*.ts', { eager: true }))\n       .forEach(i =\u003e i.install?.(ctx))\n   },\n )\n```\n\n- [📖 Check more in the Documentation](https://uvr.esm.is).\n\n## License\n\n[MIT](http://opensource.org/licenses/MIT)\n","funding_links":["https://github.com/sponsors/posva"],"categories":["Components \u0026 Libraries","TypeScript","Plugins","Pre-packed"],"sub_categories":["UI Utilities","Framework-agnostic Plugins","Plugins","Vue"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Funplugin-vue-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fposva%2Funplugin-vue-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fposva%2Funplugin-vue-router/lists"}