posva · posva · Sep 26, 2025 · Aug 7, 2025 · Aug 7, 2025 · Aug 7, 2025
diff --git a/client.d.ts b/client.d.ts
@@ -4,13 +4,16 @@ declare module 'vue-router/auto-routes' {
   /**
    * Array of routes generated by unplugin-vue-router
    */
-  export const routes: RouteRecordRaw[]
+  export const routes: readonly RouteRecordRaw[]
 
   /**
    * Setups hot module replacement for routes.
+   *
    * @param router - The router instance
    * @param hotUpdateCallback - Callback to be called after replacing the routes and before the navigation
+   *
    * @example
+   *
    * ```ts
    * import { createRouter, createWebHistory } from 'vue-router'
    * import { routes, handleHotUpdate } from 'vue-router/auto-routes'
@@ -19,7 +22,7 @@ declare module 'vue-router/auto-routes' {
    *   routes,
    * })
    * if (import.meta.hot) {
-   * handleHotUpdate(router)
+   *   handleHotUpdate(router)
    * }
    * ```
    */
@@ -31,9 +34,11 @@ declare module 'vue-router/auto-routes' {
 
 declare module 'vue-router' {
   import type { RouteNamedMap } from 'vue-router/auto-routes'
+  import type { ParamParserCustom } from 'vue-router/auto-resolver'
 
   export interface TypesConfig {
     RouteNamedMap: RouteNamedMap
+    ParamParsers: ParamParserCustom
   }
 }
 

diff --git a/examples/nuxt/package.json b/examples/nuxt/package.json
@@ -8,7 +8,7 @@
   },
   "devDependencies": {
     "@pinia/colada-nuxt": "^0.2.1",
-    "@pinia/nuxt": "^0.11.1",
+    "@pinia/nuxt": "^0.11.2",
     "nuxt": "^3.17.5",
     "unplugin-vue-router": "workspace:*"
   },

diff --git a/package.json b/package.json
@@ -139,7 +139,8 @@
     ]
   },
   "dependencies": {
-    "@vue-macros/common": "3.0.0",
+    "@babel/generator": "^7.28.3",
+    "@vue-macros/common": "^3.0.0",
     "@vue/language-core": "^3.0.7",
     "ast-walker-scope": "^0.8.2",
     "chokidar": "^4.0.3",
@@ -171,7 +172,8 @@
     "@posva/prompts": "^2.4.4",
     "@shikijs/vitepress-twoslash": "3.13.0",
     "@tanstack/vue-query": "^5.89.0",
-    "@types/node": "^22.18.6",
+    "@types/babel__generator": "^7.27.0",
+    "@types/node": "^24.3.0",
     "@types/picomatch": "^4.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
@@ -203,7 +205,7 @@
     "vitepress-plugin-llms": "^1.7.5",
     "vitest": "^3.2.4",
     "vue": "^3.5.21",
-    "vue-router": "^4.5.1",
+    "vue-router": "https://pkg.pr.new/vue-router@4f1a37a",
     "vue-router-mock": "^2.0.0",
     "vue-tsc": "^3.0.7",
     "vuefire": "^3.2.2",

diff --git a/playground-experimental/.gitignore b/playground-experimental/.gitignore
@@ -0,0 +1 @@
+tsconfig.tsbuildinfo
diff --git a/playground-experimental/auto-imports.d.ts b/playground-experimental/auto-imports.d.ts
@@ -0,0 +1,14 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const defineBasicLoader: typeof import('../src/data-loaders/entries/basic')['defineBasicLoader']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+}
diff --git a/playground-experimental/db.json b/playground-experimental/db.json
@@ -0,0 +1,24 @@
+{
+  "todos": [
+    {
+      "id": 2,
+      "title": "Walking",
+      "completed": true
+    },
+    {
+      "id": 3,
+      "title": "Cleaning",
+      "completed": false
+    },
+    {
+      "id": 4,
+      "title": "Cooking",
+      "completed": true
+    },
+    {
+      "title": "hello",
+      "completed": false,
+      "id": 7
+    }
+  ]
+}
diff --git a/playground-experimental/env.d.ts b/playground-experimental/env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
diff --git a/playground-experimental/index.html b/playground-experimental/index.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <style>
+    :root {
+      color-scheme: light dark;
+    }
+  </style>
+  <body>
+    <a
+      href="/__inspect/#/module?id=/__vue-router/auto-routes&index=0"
+      target="_blank"
+      style="margin-top: 10px; display: block"
+      >visit /__inspect/ to inspect the intermediate state</a
+    >
+    <div id="app"></div>
+    <script type="module" src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/playground-experimental/package.json b/playground-experimental/package.json
@@ -0,0 +1,23 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "nodemon -w '../src/**/*.ts' -e .ts -x vite",
+    "json-server": "json-server --watch db.json --port 4000",
+    "playground:build": "vite build"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/compiler-sfc": "^3.5.18",
+    "@vue/tsconfig": "^0.7.0",
+    "json-server": "^0.17.4",
+    "unplugin-vue-router": "workspace:*",
+    "vite": "^7.1.2"
+  },
+  "dependencies": {
+    "mande": "^2.0.9",
+    "pinia": "^3.0.3",
+    "vue": "^3.5.18",
+    "vue-router": "https://pkg.pr.new/vue-router@4f1a37a"
+  }
+}
diff --git a/playground-experimental/src/App.vue b/playground-experimental/src/App.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const router = useRouter()
+
+console.log(`We have ${router.getRoutes().length} routes.`)
+
+const targetRoute = ref('')
+</script>
+
+<template>
+  <header>
+    <div class="wrapper">
+      <nav>
+        <ul>
+          <li>
+            <RouterLink to="/">Home</RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/users/24" #default="{ href }">{{
+              href
+            }}</RouterLink>
+          </li>
+          <li>
+            <RouterLink to="/events/1992-03-24" #default="{ href }">{{
+              href
+            }}</RouterLink>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <div>
+      <p>Currently at "{{ $route.name }}" ({{ $route.fullPath }})</p>
+      <pre>{{ $route.params }}</pre>
+      <form @submit.prevent="router.push(targetRoute)">
+        <label>
+          Navigate to:
+          <input type="text" v-model="targetRoute" />
+        </label>
+        <button>Go</button>
+      </form>
+    </div>
+  </header>
+
+  <hr />
+
+  <RouterView />
+  <hr />
+  <RouterView name="named" />
+</template>
+
+<style scoped>
+ul {
+  padding-left: 0;
+}
+ul > li {
+  display: inline-block;
+}
+
+ul > li:not(:first-child) {
+  margin-left: 0.5rem;
+}
+
+li > a {
+  text-decoration: none;
+}
+.router-link-active {
+  text-decoration: underline;
+  font-weight: bold;
+}
+</style>
diff --git a/playground-experimental/src/main.ts b/playground-experimental/src/main.ts
@@ -0,0 +1,29 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import { createPinia } from 'pinia'
+import { PiniaColada } from '@pinia/colada'
+import { router } from './router'
+import { DataLoaderPlugin } from 'unplugin-vue-router/data-loaders'
+import { RouterLink, RouterView } from 'vue-router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(PiniaColada, {})
+// @ts-expect-error: FIXME: should be doable
+app.use(DataLoaderPlugin, { router })
+app.component('RouterLink', RouterLink)
+app.component('RouterView', RouterView)
+app.use(router)
+
+// @ts-expect-error: for debugging on browser
+window.$router = router
+
+app.mount('#app')
+
+// small logger for navigations, useful to check HMR
+router.isReady().then(() => {
+  router.beforeEach((to, from) => {
+    console.log('🧭', from.fullPath, '->', to.fullPath)
+  })
+})
diff --git a/playground-experimental/src/page-outside.vue b/playground-experimental/src/page-outside.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h1>Page outside of <code>pages</code></h1>
+</template>
diff --git a/playground-experimental/src/pages/(home).vue b/playground-experimental/src/pages/(home).vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h1>Home</h1>
+
+  <p>This is the homepage.</p>
+</template>
diff --git a/playground-experimental/src/pages/[...path].vue b/playground-experimental/src/pages/[...path].vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import doc from '../main.ts?raw'
+
+const route = useRoute()
+const router = useRouter()
+route.params.path
+
+console.log('typeof', typeof route.params.active)
+console.log('value', route.params.active)
+console.log('typeof', typeof route.params.other)
+console.log('value', route.params.other)
+
+definePage({
+  meta: {
+    title: 'Not Found',
+    description: 'This page does not exist.',
+    docLength: doc.length,
+    number: 27,
+  },
+  name: 'not-found',
+  params: {
+    query: {
+      page: {
+        parser: 'int',
+        default: 1,
+        format: 'value',
+      },
+      other: {
+        parser: 'bool',
+        default: false,
+      },
+      active: {
+        parser: 'bool',
+        default: true,
+      },
+
+      multi: {
+        format: 'array',
+      },
+
+      req: {
+        parser: 'int',
+        default: -1,
+      },
+
+      when: {
+        parser: 'date',
+        default: () => new Date(),
+      },
+    },
+  },
+})
+</script>
+
+<template>
+  <main>
+    <h1>Not Found</h1>
+
+    <pre>{{ $route.params }}</pre>
+    <pre>{{ $route.query }}</pre>
+    <pre>{{ $route.meta }}</pre>
+  </main>
+</template>
+
+<route lang="json">
+{
+  "meta": {
+    "from block": true
+  }
+}
+</route>
diff --git a/playground-experimental/src/pages/a.[b].c.[d].vue b/playground-experimental/src/pages/a.[b].c.[d].vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h1>{{ String($route.name) }} - {{ $route.path }}</h1>
+</template>
diff --git a/playground-experimental/src/pages/b.vue b/playground-experimental/src/pages/b.vue
@@ -0,0 +1,5 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h1>Page B</h1>
+</template>
diff --git a/playground-experimental/src/pages/blog/[[slugOptional]]+.vue b/playground-experimental/src/pages/blog/[[slugOptional]]+.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h1>Blog</h1>
+
+  <pre>{{ $route.params }}</pre>
+</template>
diff --git a/playground-experimental/src/pages/blog/[slug]+.vue b/playground-experimental/src/pages/blog/[slug]+.vue
@@ -0,0 +1,7 @@
+<script lang="ts" setup></script>
+
+<template>
+  <h1>Blog</h1>
+
+  <pre>{{ $route.params }}</pre>
+</template>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		/// <reference types="vite/client" />
		/// <reference types="unplugin-vue-router/client" />