https://github.com/kitbagjs/router
A type safe router for vuejs
https://github.com/kitbagjs/router
router typescript vue
Last synced: 2 months ago
JSON representation
A type safe router for vuejs
- Host: GitHub
- URL: https://github.com/kitbagjs/router
- Owner: kitbagjs
- License: mit
- Created: 2023-11-21T21:01:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-07-21T00:39:21.000Z (8 months ago)
- Last Synced: 2025-07-21T02:29:30.408Z (8 months ago)
- Topics: router, typescript, vue
- Language: TypeScript
- Homepage: https://router.kitbag.dev
- Size: 97.1 MB
- Stars: 223
- Watchers: 2
- Forks: 7
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- fucking-awesome-vue - kitbag/router - A type safe router for vuejs (Components & Libraries / UI Utilities)
- awesome-vue - kitbag/router - A type safe router for vuejs (Components & Libraries / UI Utilities)
- awesome-vue - kitbag/router - A type safe router for vuejs (Components & Libraries / UI Utilities)
README
# @kitbag/router
Type safe router for Vue.js
[![NPM Version][npm-badge]][npm-url]
[![Netlify Status][netlify-badge]][netlify-url]
[![Discord chat][discord-badge]][discord-url]
[![Open in StackBlitz][stackblitz-badge]][stackblitz-url]
## Getting Started
Get Started with our [documentation](https://kitbag-router.netlify.app/) or our [intro video](https://kitbag-router.netlify.app/)
## Installation
Install Kitbag Router with your favorite package manager
```bash
# bun
bun add @kitbag/router
# yarn
yarn add @kitbag/router
# npm
npm install @kitbag/router
```
## Define Routes
Routes 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).
```ts
import { createRoute } from '@kitbag/router'
const Home = { template: '
Home' }
const About = { template: 'About' }
const routes = [
createRoute({ name: 'home', path: '/', component: Home }),
createRoute({ name: 'path', path: '/about', component: About }),
] as const
```
> [!NOTE] Type Safety
> Using `as const` when defining routes is important as it ensures the types are correctly inferred.
## Create Router
A router is created using the [`createRouter`](https://kitbag-router.netlify.app/api/functions/createRouter) utility and passing in the routes.
```ts
import { createRouter } from '@kitbag/router'
const router = createRouter(routes)
```
## Vue Plugin
Create a router instance and pass it to the app as a plugin
```ts {6}
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.use(router)
app.mount('#app')
```
## Type Safety
Kitbag 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.
```ts
declare module '@kitbag/router' {
interface Register {
router: typeof router
}
}
```
This 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.
## RouterView
Give your route components a place to be mounted
```html
```
This 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).
## RouterLink
Use RouterLink for navigating between routes.
```html
Home
```
### Type Safety in RouterLink
The `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.