Vue Routider

Make Vue Router type safe with a very similar API. (Not compatible with vue-router@3)

Documents

Installation

$ npm i vue@next vue-router@next vue-routider

Example

main.ts

import { createApp } from 'vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

router/index.ts

import { createWebHistory } from 'vue-router'
import { createRoutider, createPath, createPaths } from 'vue-routider'

const { router, useRouter, useRoute } = createRoutider({
  history: createWebHistory(),
  routes: {
    Index: {
      path: '/', // use can just pass a string when it does not include params
      component: /* something */
    },
    // nested routes are supported
    Items: {
      path: '/items',
      component: /* something */,
      children: {
        Item: {
          path: createPath`${'id'}`,
          component: /* something */,
          children: {
            ItemDetail: {
              path: '/detail',
              component: /* something */
            }
          }
        }
      }
    },
    UserItem: {
      path: createPath`/users/${'userId'}/${'id'}`,
      component: /* something */
    },
    Users: {
      // use createPaths for alias paths (you can use an array if it does not include params)
      path: createPaths(
        createPath`/users/${'id'}`,
        createPath`/u/${'id'}`
      ),
      component: /* something */
    }
  }
})

export default router
export { useRouter, useRoute }

pages/Item.vue

import { defineComponent } from 'vue'
import { useRoute } from '../router'

export default defineComponent({
  setup() {
    const route = useRoute('Item')
    // here type of `route.params` will become `{ id: string | string[] }`
  }
})

pages/Base.vue

import { defineComponent } from 'vue'
import { useRoute } from '../router'

export default defineComponent({
  setup() {
    const route = useRoute(['Item', 'UserItem'])
    // here type of `route.params` will become `{ id: string | string[], userId?: string | string[] }`
  }
})