fix(types): use native vue-router types

BREAKING CHANGE: TODO: write changelog once the changes are confirmed

client.d.ts

@@ -7,86 +7,19 @@ declare module 'vue-router/auto-routes' {
   export const routes: RouteRecordRaw[]
 }
 
-declare module 'unplugin-vue-router/types' {
-  import type { RouteNamedMap } from 'vue-router/auto-routes'
-  export interface TypesConfig {
-    RouteNamedMap: RouteNamedMap
-  }
-}
-
 declare module 'vue-router' {
-  import type {
-    NavigationGuardTyped,
-    NavigationGuardWithThisTyped,
-    RouteLocationNormalizedLoadedTypedList,
-    _RouterTyped,
-    RouterLinkTyped,
-  } from 'unplugin-vue-router/types'
-
   import type { RouteNamedMap } from 'vue-router/auto-routes'
-  export interface TypesConfig {
-    beforeRouteEnter: NavigationGuardWithThisTyped<undefined, RouteNamedMap>
-    beforeRouteUpdate: NavigationGuardTyped<RouteNamedMap>
-    beforeRouteLeave: NavigationGuardTyped<RouteNamedMap>
 
-    $route: RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[keyof RouteNamedMap]
-    $router: _RouterTyped<RouteNamedMap>
-
-    RouterLink: RouterLinkTyped<RouteNamedMap>
+  export interface TypesConfig {
+    RouteNamedMap: RouteNamedMap
   }
 }
 
 declare module 'vue-router/auto' {
-  import type { RouteNamedMap } from 'vue-router/auto-routes'
-  import type {
-    _RouterTyped,
-    _RouterOptions,
-    RouteLocationNormalizedLoadedTypedList,
-    NavigationGuardTyped,
-    RouterLinkPropsTyped,
-    RouterLinkTyped,
-    UseLinkFnTyped,
-  } from 'unplugin-vue-router/types'
-
   // reexport all types that are not augmented by unplugin-vue-router
   export * from 'vue-router'
-  // Augmented types to override the ones exported by vue-router
-  export type {
-    Router,
-    RouteLocationNormalized,
-    RouteRecordName,
-    RouteLocationNormalizedLoaded,
-    RouteLocation,
-    RouteLocationAsRelativePath,
-    RouteLocationRaw,
-    RouteLocationResolved,
-    RouteParams,
-    RouteParamsRaw,
-    NavigationGuard,
-    NavigationGuardWithThis,
-  } from 'unplugin-vue-router/types'
-
-  /**
-   * @deprecated use `Router` instead. This type will be a different one in the next major version.
-   */
-  export type RouterTyped = _RouterTyped<RouteNamedMap>
-  export function useRouter(): _RouterTyped<RouteNamedMap>
-  export function useRoute<
-    Name extends keyof RouteNamedMap = keyof RouteNamedMap,
-  >(name?: Name): RouteLocationNormalizedLoadedTypedList<RouteNamedMap>[Name]
-  export const useLink: UseLinkFnTyped<RouteNamedMap>
-  export function onBeforeRouteLeave(
-    guard: NavigationGuardTyped<RouteNamedMap>
-  ): void
-  export function onBeforeRouteUpdate(
-    guard: NavigationGuardTyped<RouteNamedMap>
-  ): void
-  export const RouterLink: RouterLinkTyped<RouteNamedMap>
-  export const RouterLinkProps: RouterLinkPropsTyped<RouteNamedMap>
-  export function createRouter(
-    options: _RouterOptions
-  ): _RouterTyped<RouteNamedMap>
 
+  // TODO: deprecate vue-router/auto
   export {
     // Experimental Data Fetching
     definePage,

examples/nuxt/pages/users/[id].vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineBasicLoader } from 'unplugin-vue-router/runtime'
+import { defineBasicLoader } from 'unplugin-vue-router/data-loaders/basic'
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
 
 export const useUserData = defineBasicLoader(

package.json

@@ -212,7 +212,7 @@
     "vitepress": "1.2.3",
     "vitest": "^1.6.0",
     "vue": "^3.4.27",
-    "vue-router": "4.3.2",
+    "vue-router": "4.4.0-alpha.2",
     "vue-router-mock": "^1.1.0",
     "vue-tsc": "^2.0.21",
     "vuefire": "^3.1.23",

playground/env.d.ts

@@ -1,21 +1,2 @@
 /// <reference types="vite/client" />
-
-// manual extension of route types
-declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'unplugin-vue-router'
-
-  export interface RouteNamedMap {
-    'custom-dynamic-name': RouteRecordInfo<
-      'custom-dynamic-name',
-      '/added-during-runtime/[...path]',
-      { path: ParamValue<true> },
-      { path: ParamValue<false> }
-    >
-  }
-}
+/// <reference types="unplugin-vue-router/client" />

playground/package.json

@@ -13,13 +13,13 @@
     "json-server": "^0.17.4",
     "unplugin-vue-router": "workspace:*",
     "vite": "^5.2.13",
-    "vite-plugin-inspect": "^0.8.4",
-    "vue": "^3.4.27"
+    "vite-plugin-inspect": "^0.8.4"
   },
   "dependencies": {
     "@tanstack/vue-query": "^5.41.0",
     "mande": "^2.0.9",
     "pinia": "^2.1.7",
-    "vue": "^3.4.27"
+    "vue": "^3.4.27",
+    "vue-router": "4.4.0-alpha.2"
   }
 }

playground/src/App.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import { useLink, useRoute } from 'vue-router/auto'
-import type { RouteNamedMap } from 'vue-router/auto-routes'
+import { useLink, useRoute } from 'vue-router'
 import type {
   RouteLocationNormalizedLoaded,
   RouteLocationResolved,
   RouteLocation,
-} from 'vue-router/auto'
+} from 'vue-router'
 import { ref } from 'vue'
 import { routes } from 'vue-router/auto-routes'
 
@@ -90,7 +89,7 @@ const customRoute = useRoute('/deep/nesting/works/custom-path')
         <button @click="$router.push('/oeu')">Click</button>
         <RouterLink to="/named-route" v-slot="{ route }">
           :name param is:
-          {{ (route as RouteLocationNormalizedLoaded<'/[name]'>).params.name }}
+          {{ (route as RouteLocationResolved<'/[name]'>).params.name }}
         </RouterLink>
       </nav>
     </div>

playground/src/pages/[...path]+.vue

@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router/auto'
+
+const route = useRoute('/[...path]+')
+</script>
+
+<template>
+  <main>
+    <h1>Not Found</h1>
+    <p>{{ route.params.path }} does not exist.</p>
+  </main>
+</template>
+
+<route>
+{
+  "props": true
+}
+</route>

playground/src/pages/[...path].vue

@@ -1,7 +1,9 @@
 <template>
   <main>
     <h1>Not Found</h1>
-    <p>{{ $route.params.path }} does not exist.</p>
+    <p>
+      {{ $route.name === '/[...path]' && $route.params.path }} does not exist.
+    </p>
   </main>
 </template>
 

playground/src/pages/users/[id].vue

@@ -1,5 +1,6 @@
 <script lang="ts">
 import { defineColadaLoader } from 'unplugin-vue-router/data-loaders/pinia-colada'
+import type { RouteLocationNormalized } from 'vue-router'
 export const myExport = 'OUTSIDE SETUP TEST'
 
 const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))
@@ -47,8 +48,9 @@ const { data: user2 } = useOldData()
 
 definePage({
   beforeEnter(to) {
-    if (Number.isNaN(Number(to.params.id))) {
-      console.log('invalid param id', to.params.id)
+    const { id } = (to as RouteLocationNormalized<'/users/[id]'>).params
+    if (Number.isNaN(Number(id))) {
+      console.log('invalid param id', id)
       return false
     }
   },

playground/src/router.ts

@@ -1,5 +1,6 @@
-import { createRouter, createWebHistory } from 'vue-router/auto'
+import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'
+import type { RouteRecordInfo, ParamValue } from 'vue-router'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -16,3 +17,15 @@ if (import.meta.hot) {
     console.log(mod!.router.getRoutes())
   })
 }
+
+// manual extension of route types
+declare module 'vue-router/auto-routes' {
+  export interface RouteNamedMap {
+    'custom-dynamic-name': RouteRecordInfo<
+      'custom-dynamic-name',
+      '/added-during-runtime/[...path]',
+      { path: ParamValue<true> },
+      { path: ParamValue<false> }
+    >
+  }
+}

playground/tsconfig.json

@@ -28,9 +28,6 @@
         "../src/data-loaders/pinia-colada"
       ],
     },
-    "types": [
-      "unplugin-vue-router/client"
-    ],
   },
   "vueCompilerOptions": {
     "plugins": [

playground/typed-router.d.ts

@@ -5,22 +5,23 @@
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
-declare module 'vue-router/auto-routes' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
 
+declare module 'vue-router/auto-routes' {
   /**
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
     'home': RouteRecordInfo<'home', '/', Record<never, never>, Record<never, never>>,
     '/[name]': RouteRecordInfo<'/[name]', '/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
     '/[...path]': RouteRecordInfo<'/[...path]', '/:path(.*)', { path: ParamValue<true> }, { path: ParamValue<false> }>,
+    '/[...path]+': RouteRecordInfo<'/[...path]+', '/:path(.*)+', { path: ParamValueOneOrMore<true> }, { path: ParamValueOneOrMore<false> }>,
     '/@[profileId]': RouteRecordInfo<'/@[profileId]', '/@:profileId', { profileId: ParamValue<true> }, { profileId: ParamValue<false> }>,
     '/about': RouteRecordInfo<'/about', '/about', Record<never, never>, Record<never, never>>,
     '/about.extra.nested': RouteRecordInfo<'/about.extra.nested', '/about/extra/nested', Record<never, never>, Record<never, never>>,
@@ -65,3 +66,4 @@ declare module 'vue-router/auto-routes' {
     '/with-extension': RouteRecordInfo<'/with-extension', '/with-extension', Record<never, never>, Record<never, never>>,
   }
 }
+

src/codegen/generateDTS.ts

@@ -1,5 +1,4 @@
 export function generateDTS({
-  vueRouterModule,
   routesModule,
   routeNamedMap,
 }: {
@@ -15,15 +14,15 @@ export function generateDTS({
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
-declare module '${routesModule}' {
-  import type {
-    RouteRecordInfo,
-    ParamValue,
-    ParamValueOneOrMore,
-    ParamValueZeroOrMore,
-    ParamValueZeroOrOne,
-  } from 'unplugin-vue-router/types'
+import type {
+  RouteRecordInfo,
+  ParamValue,
+  ParamValueOneOrMore,
+  ParamValueZeroOrMore,
+  ParamValueZeroOrOne,
+} from 'vue-router'
 
+declare module '${routesModule}' {
   /**
    * Route name map generated by unplugin-vue-router
    */

src/codegen/generateRouteMap.spec.ts

@@ -2,7 +2,6 @@ import { describe, expect, it } from 'vitest'
 import { generateRouteNamedMap } from './generateRouteMap'
 import { PrefixTree } from '../core/tree'
 import { resolveOptions } from '../options'
-import { resolve } from 'pathe'
 
 const DEFAULT_OPTIONS = resolveOptions({})