{"id":22489001,"url":"https://github.com/kitbagjs/router","last_synced_at":"2026-05-13T16:02:52.003Z","repository":{"id":211453233,"uuid":"721823123","full_name":"kitbagjs/router","owner":"kitbagjs","description":"A type safe router for vuejs","archived":false,"fork":false,"pushed_at":"2025-07-21T00:39:21.000Z","size":101865,"stargazers_count":223,"open_issues_count":5,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-21T02:29:30.408Z","etag":null,"topics":["router","typescript","vue"],"latest_commit_sha":null,"homepage":"https://router.kitbag.dev","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/kitbagjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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":"pleek91, stackoverfloweth"}},"created_at":"2023-11-21T21:01:01.000Z","updated_at":"2025-07-20T18:23:16.000Z","dependencies_parsed_at":"2024-05-10T03:24:07.218Z","dependency_job_id":"d23455a5-fcb5-473e-943c-496312f12a7d","html_url":"https://github.com/kitbagjs/router","commit_stats":null,"previous_names":["kitbagjs/router"],"tags_count":63,"template":false,"template_full_name":null,"purl":"pkg:github/kitbagjs/router","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitbagjs%2Frouter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitbagjs%2Frouter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitbagjs%2Frouter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitbagjs%2Frouter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kitbagjs","download_url":"https://codeload.github.com/kitbagjs/router/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kitbagjs%2Frouter/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268456692,"owners_count":24253267,"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-02T02:00:12.353Z","response_time":74,"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":["router","typescript","vue"],"created_at":"2024-12-06T17:19:03.976Z","updated_at":"2026-03-08T02:14:07.754Z","avatar_url":"https://github.com/kitbagjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/pleek91, stackoverfloweth"],"categories":["TypeScript","Components \u0026 Libraries"],"sub_categories":["UI Utilities"],"readme":"# @kitbag/router\n\nType safe router for Vue.js\n\n[![NPM Version][npm-badge]][npm-url]\n[![Netlify Status][netlify-badge]][netlify-url]\n[![Discord chat][discord-badge]][discord-url]\n[![Open in StackBlitz][stackblitz-badge]][stackblitz-url]\n\n[npm-badge]: https://img.shields.io/npm/v/@kitbag/router.svg\n[npm-url]: https://www.npmjs.org/package/@kitbag/router\n[netlify-badge]: https://api.netlify.com/api/v1/badges/c12f79b8-49f9-4529-bc23-f8ffca8919a3/deploy-status\n[netlify-url]: https://app.netlify.com/sites/kitbag-router/deploys\n[discord-badge]: https://img.shields.io/discord/1079625926024900739?logo=discord\u0026label=Discord\n[discord-url]: https://discord.gg/zw7dpcc5HV\n[stackblitz-badge]: https://developer.stackblitz.com/img/open_in_stackblitz_small.svg\n[stackblitz-url]: https://stackblitz.com/~/github.com/kitbagjs/router-preview\n\n\u003cimg src=\"https://kitbag.dev/kitbag-logo.svg\" width=\"20%\" /\u003e\n\n## Getting Started\n\nGet Started with our [documentation](https://kitbag-router.netlify.app/).\n\n## Installation\n\nInstall Kitbag Router with your favorite package manager\n\n```bash\n# bun\nbun add @kitbag/router\n# yarn\nyarn add @kitbag/router\n# npm\nnpm install @kitbag/router\n```\n\n## Define Routes\n\nRoutes are created individually using the [`createRoute`](https://kitbag-router.netlify.app/api/functions/createRoute) utility. Learn more about [defining routes](https://kitbag-router.netlify.app/core-concepts/routes).\n\n```ts\nimport { createRoute } from '@kitbag/router'\n\nconst Home = { template: '\u003cdiv\u003eHome\u003c/div\u003e' }\nconst About = { template: '\u003cdiv\u003eAbout\u003c/div\u003e' }\n\nconst routes = [\n  createRoute({ name: 'home', path: '/', component: Home }),\n  createRoute({ name: 'path', path: '/about', component: About }),\n] as const\n```\n\n\u003e [!NOTE] Type Safety\n\u003e Using `as const` when defining routes is important as it ensures the types are correctly inferred.\n\n## Create Router\n\nA router is created using the [`createRouter`](https://kitbag-router.netlify.app/api/functions/createRouter) utility and passing in the routes.\n\n```ts\nimport { createRouter } from '@kitbag/router'\n\nconst router = createRouter(routes)\n```\n\n## Vue Plugin\n\nCreate a router instance and pass it to the app as a plugin\n\n```ts {6}\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nconst app = createApp(App)\n\napp.use(router)\napp.mount('#app')\n```\n\n## Type Safety\n\nKitbag Router utilizes [declaration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) to provide the internal types to match the actual router you're using.\n\n```ts\ndeclare module '@kitbag/router' {\n  interface Register {\n    router: typeof router\n  }\n}\n```\n\nThis means then when you import a component, composition, or hook from `@kitbag/router` it will be correctly typed. Alternatively, you can create your own typed router assets by using the [`createRouterAssets`](https://kitbag-router.netlify.app/api/functions/createRouterAssets) utility. This approach is especially useful for projects that use multiple routers.\n\n## RouterView\n\nGive your route components a place to be mounted\n\n```html\n\u003cdiv class=\"app\"\u003e\n  \u003crouter-view /\u003e\n\u003c/div\u003e\n```\n\nThis component can be mounted anywhere you want route components to be mounted. Nested routes can also have a nested `RouterView` which would be responsible for rendering any children that route may have. Read more about [nested routes](https://kitbag-router.netlify.app/core-concepts/routes#parent).\n\n## RouterLink\n\nUse RouterLink for navigating between routes.\n\n```html\n\u003ctemplate\u003e\n  \u003crouter-link :to=\"(resolve) =\u003e resolve('home')\"\u003eHome\u003c/router-link\u003e\n\u003c/template\u003e\n```\n\n### Type Safety in RouterLink\n\nThe `to` prop accepts a callback function or a [`Url`](https://kitbag-router.netlify.app/api/types/Url) string. When using a callback function, the router will provide a `resolve` function that is a type safe way to create link for your pre-defined routes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitbagjs%2Frouter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkitbagjs%2Frouter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkitbagjs%2Frouter/lists"}