feat: add children route names generic to generated RouteNamedMap and adjust docs and tests

docs/.vitepress/twoslash-files.ts

@@ -8,25 +8,37 @@ declare module 'vue-router/auto-routes' {
     ParamValueZeroOrOne,
   } from 'vue-router'
 
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
+    '/': RouteRecordInfo<
+      '/',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      never
+    >
     '/users': RouteRecordInfo<
       '/users',
       '/users',
       Record<never, never>,
-      Record<never, never>
+      Record<never, never>,
+      never
     >
     '/users/[id]': RouteRecordInfo<
       '/users/[id]',
       '/users/:id',
       { id: ParamValue<true> },
-      { id: ParamValue<false> }
+      { id: ParamValue<false> },
+      '/users/[id]/edit'
     >
     '/users/[id]/edit': RouteRecordInfo<
       '/users/[id]/edit',
       '/users/:id/edit',
       { id: ParamValue<true> },
-      { id: ParamValue<false> }
+      { id: ParamValue<false> },
+      never
     >
   }
 }

docs/.vitepress/twoslash/code/typed-router.ts

@@ -8,24 +8,33 @@ declare module 'vue-router/auto-routes' {
   } from 'vue-router'
 
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
+    '/': RouteRecordInfo<
+      '/',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      never
+    >
     '/users': RouteRecordInfo<
       '/users',
       '/users',
       Record<never, never>,
-      Record<never, never>
+      Record<never, never>,
+      never
     >
     '/users/[id]': RouteRecordInfo<
       '/users/[id]',
       '/users/:id',
       { id: ParamValue<true> },
-      { id: ParamValue<false> }
+      { id: ParamValue<false> },
+      '/users/[id]/edit'
     >
     '/users/[id]/edit': RouteRecordInfo<
       '/users/[id]/edit',
       '/users/:id/edit',
       { id: ParamValue<true> },
-      { id: ParamValue<false> }
+      { id: ParamValue<false> },
+      never
     >
   }
 }

docs/guide/typescript.md

@@ -60,7 +60,17 @@ declare module 'vue-router/auto-routes' {
       // these are the raw param types (accept numbers, strings, booleans, etc)
       { path: ParamValue<true> },
       // these are the normalized params as found in useRoute().params
-      { path: ParamValue<false> }
+      { path: ParamValue<false> },
+      // this is a union of all children route names
+      // if the route does not have nested routes, pass `never` or omit this generic entirely
+      'custom-dynamic-child-name'
+    >
+    'custom-dynamic-child-name': RouteRecordInfo<
+      'custom-dynamic-child-name',
+      '/added-during-runtime/[...path]/child',
+      { path: ParamValue<true> },
+      { path: ParamValue<false> },
+      never
     >
   }
 }
@@ -76,13 +86,20 @@ import { useRoute, type RouteLocationNormalizedLoaded } from 'vue-router'
 // ---cut-end---
 // @errors: 2322 2339
 // @moduleResolution: bundler
-// these are all valid
-const userWithIdCasted = useRoute() as RouteLocationNormalizedLoaded<'/users/[id]'>
-userWithIdCasted.params.id
-const userWithIdTypeParam = useRoute<'/users/[id]'>()
-userWithIdTypeParam.params.id
-// 👇 this one is the easiest to write because it autocompletes
-const userWithIdParam = useRoute('/users/[id]')
-userWithIdParam.params
-//              ^?
+// These are all valid ways to get a typed route and return the
+// provided route's and any of its child routes' typings.
+// Note that `/users/[id]/edit` is a child route
+// of `/users/[id]` in this example.
+
+// Not recommended, since this leaves out any child routes' typings.
+const userRouteWithIdCasted =
+  useRoute() as RouteLocationNormalizedLoaded<'/users/[id]'>
+userRouteWithIdCasted.params.id
+// Better way, but no autocompletion.
+const userRouteWithIdTypeParam = useRoute<'/users/[id]'>()
+userRouteWithIdTypeParam.params.id
+// 👇 This one is the easiest to write because it autocompletes.
+const userRouteWithIdParam = useRoute('/users/[id]')
+userRouteWithIdParam.name
+//                   ^?
 ```

docs/introduction.md

@@ -102,31 +102,39 @@ After adding this plugin, **start the dev server** (usually `npm run dev`) **to
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
-import type {
-  RouteRecordInfo,
-  ParamValue,
-  ParamValueOneOrMore,
-  ParamValueZeroOrMore,
-  ParamValueZeroOrOne,
-} from 'vue-router'
-
 declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
   /**
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>
+    '/': RouteRecordInfo<
+      '/',
+      '/',
+      Record<never, never>,
+      Record<never, never>,
+      never
+    >
     '/about': RouteRecordInfo<
       '/about',
       '/about',
       Record<never, never>,
-      Record<never, never>
+      Record<never, never>,
+      never
     >
     '/users/[id]': RouteRecordInfo<
-      '/[id]',
-      '/:id',
+      '/users/[id]',
+      '/users/:id',
       { id: ParamValue<true> },
-      { id: ParamValue<false> }
+      { id: ParamValue<false> },
+      never
     >
   }
 }

package.json

@@ -111,6 +111,7 @@
     "vitest": "vitest --typecheck",
     "docs": "vitepress dev docs",
     "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
     "lint": "prettier -c '{src,test,e2e,examples,playground}/**/*.{ts,vue}'",
     "play": "npm -C playground run dev",
     "play:build": "npm -C playground run build",
@@ -148,7 +149,7 @@
     "yaml": "^2.7.1"
   },
   "peerDependencies": {
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.5.1"
   },
   "peerDependenciesMeta": {
     "vue-router": {
@@ -192,11 +193,20 @@
     "vitepress": "1.6.3",
     "vitest": "^3.1.2",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0",
+    "vue-router": "^4.5.1",
     "vue-router-mock": "^1.1.0",
     "vue-tsc": "^2.2.10",
     "vuefire": "^3.2.1",
     "webpack": "^5.99.6",
     "yorkie": "^2.0.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "protobufjs",
+      "vue-demi",
+      "yorkie"
+    ]
   }
 }

playground/package.json

@@ -21,6 +21,6 @@
     "mande": "^2.0.9",
     "pinia": "^3.0.2",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.1"
   }
 }

playground/src/router.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes, handleHotUpdate } from 'vue-router/auto-routes'
-import type { RouteRecordInfo, ParamValue } from 'vue-router'
+import type { RouteRecordInfo, ParamValue, RouteMeta } from 'vue-router'
 
 export const router = createRouter({
   history: createWebHistory(),
@@ -31,7 +31,17 @@ declare module 'vue-router/auto-routes' {
       'custom-dynamic-name',
       '/added-during-runtime/[...path]',
       { path: ParamValue<true> },
-      { path: ParamValue<false> }
+      { path: ParamValue<false> },
+      RouteMeta,
+      'custom-dynamic-child-name'
+    >
+    'custom-dynamic-child-name': RouteRecordInfo<
+      'custom-dynamic-child-name',
+      '/added-during-runtime/[...path]/child',
+      { path: ParamValue<true> },
+      { path: ParamValue<false> },
+      RouteMeta,
+      never
     >
   }
 }

playground/typed-router.d.ts

@@ -12,13 +12,14 @@ declare module 'vue-router/auto-routes' {
     ParamValueOneOrMore,
     ParamValueZeroOrMore,
     ParamValueZeroOrOne,
+    RouteMeta,
   } from 'vue-router'
 
   /**
    * Route name map generated by unplugin-vue-router
    */
   export interface RouteNamedMap {
-    '/(test-group)': RouteRecordInfo<'/(test-group)', '/', Record<never, never>, Record<never, never>>,
+    '/(test-group)': RouteRecordInfo<'/(test-group)', '/', Record<never, never>, Record<never, never>, '/(test-group)/test-group-child'>,
     '/(test-group)/test-group-child': RouteRecordInfo<'/(test-group)/test-group-child', '/test-group-child', Record<never, never>, Record<never, never>>,
     'home': RouteRecordInfo<'home', '/', Record<never, never>, Record<never, never>>,
     '/[name]': RouteRecordInfo<'/[name]', '/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
@@ -27,7 +28,7 @@ declare module 'vue-router/auto-routes' {
     '/@[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>>,
-    '/articles': RouteRecordInfo<'/articles', '/articles', Record<never, never>, Record<never, never>>,
+    '/articles': RouteRecordInfo<'/articles', '/articles', Record<never, never>, Record<never, never>, '/articles/' | '/articles/[id]' | '/articles/[id]+'>,
     '/articles/': RouteRecordInfo<'/articles/', '/articles', Record<never, never>, Record<never, never>>,
     '/articles/[id]': RouteRecordInfo<'/articles/[id]', '/articles/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/articles/[id]+': RouteRecordInfo<'/articles/[id]+', '/articles/:id+', { id: ParamValueOneOrMore<true> }, { id: ParamValueOneOrMore<false> }>,

src/codegen/generateDTS.ts

@@ -23,6 +23,7 @@ declare module '${routesModule}' {
     ParamValueOneOrMore,
     ParamValueZeroOrMore,
     ParamValueZeroOrOne,
+    RouteMeta,
   } from 'vue-router'
 
   /**