Skip to content

Typed Routes v4.4.0+


‼️ Experimental feature

RouterLink to autocomplete

It's possible to configure the router to have a map of typed routes. While this can be done manually, it is recommended to use the unplugin-vue-router plugin to generate the routes and the types automatically.

Manual Configuration

Here is an example of how to manually configure typed routes:

// import the `RouteRecordInfo` type from vue-router to type your routes
import type { RouteRecordInfo } from 'vue-router'

// Define an interface of routes
export interface RouteNamedMap {
  // each key is a name
  home: RouteRecordInfo<
    // here we have the same name
    // this is the path, it will appear in autocompletion
    // these are the raw params. In this case, there are no params allowed
    Record<never, never>,
    // these are the normalized params
    Record<never, never>
  // repeat for each route..
  // Note you can name them whatever you want
  'named-param': RouteRecordInfo<
    { name: string | number }, // raw value
    { name: string } // normalized value
  'article-details': RouteRecordInfo<
    { id: Array<number | string> },
    { id: string[] }
  'not-found': RouteRecordInfo<
    { path: string },
    { path: string }

// Last, you will need to augment the Vue Router types with this map of routes
declare module 'vue-router' {
  interface TypesConfig {
    RouteNamedMap: RouteNamedMap


This is indeed tedious and error-prone. That's why it's recommended to use unplugin-vue-router to generate the routes and the types automatically.

Released under the MIT License.