@kitbag/router

Type safe router for Vue.js

Getting Started

Get Started with our documentation or our intro video

Installation

Install Kitbag Router with your favorite package manager

# bun
bun add @kitbag/router
# yarn
yarn add @kitbag/router
# npm
npm install @kitbag/router

Define Routes

Routes are created individually using the createRoute utility. Learn more about defining routes.

import { createRoute } from '@kitbag/router'

const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }

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 utility and passing in the routes.

import { createRouter } from '@kitbag/router'

const router = createRouter(routes)

Vue Plugin

Create a router instance and pass it to the app as a plugin

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 to provide the internal types to match the actual router you're using.

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 utility. This approach is especially useful for projects that use multiple routers.

RouterView

Give your route components a place to be mounted

<div class="app">
  <router-view />
</div>

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.

RouterLink

Use RouterLink for navigating between routes.

<template>
  <router-link :to="(resolve) => resolve('home')">Home</router-link>
</template>

Type Safety in RouterLink

The to prop accepts a callback function or a 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.