docs: add modfiy vite config for use custom Parser (#2723)

* docs(exp): add modfiy vite config for use custom Parser

* refactor: review

---------

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

diff --git a/packages/docs/experimental/param-parsers.md b/packages/docs/experimental/param-parsers.md
index 50c3b69732830dca5ed8e1014cd57ad8e6eedf63..b33ddde7dce2d6c8612c14a023166d31e72f4256 100644 (file)
--- a/packages/docs/experimental/param-parsers.md
+++ b/packages/docs/experimental/param-parsers.md
@@ -18,6 +18,31 @@ In the stable router, params and query come in as `string | string[] | null`. Yo
 
 This works but the type system can't help you, every consumer has to know the convention, and query params are even worse.
 
+## Setup
+
+Enable `experimental.paramParsers` in the Vue Router Vite plugin. This tells the plugin where to scan for custom parsers and registers them both at runtime and in the generated `typed-router.d.ts`.
+
+```ts [vite.config.ts]
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import VueRouter from 'vue-router/vite'
+
+export default defineConfig({
+  plugins: [
+    VueRouter({
+      experimental: {
+        paramParsers: {
+          dir: 'src/params',
+        },
+      },
+    }),
+    vue(),
+  ],
+})
+```
+
+`src/params` is the default directory when setting `paramParsers` to `true`, but you can point `dir` to any project-relative folder, or to an array of folders.
+
 ## Built-in parsers
 
 | Name     | Path | Query | Type      |
@@ -38,7 +63,7 @@ route.params.id // number
 
 ## Defining custom parsers
 
-You define param parsers as modules exporting a `parser` in `src/params/*`. The file name is the parser name you use in routes. For example, `src/params/uuid.ts` exports a `parser` that validates UUIDs and can be used as `[id=uuid]` in route files.
+You define param parsers as modules exporting a `parser` in the configured param parser directory. The file name is the parser name you use in routes. For example, `src/params/uuid.ts` exports a `parser` that validates UUIDs and can be used as `[id=uuid]` in route files.
 
 A parser is just an object with a _getter_ and a _setter_ but to make things simpler to use, Vue Router provides two helpers: [`defineParamParser()`](#defineParamParser) and [`defineParamParserRaw()`](#defineParamParserRaw).