From f4173b362b65bbbf41a7f20df50a60dc263649b3 Mon Sep 17 00:00:00 2001
From: Serge Doda <33413869+bargel@users.noreply.github.com>
Date: Mon, 18 Mar 2024 08:18:41 -0700
Subject: [PATCH] docs: add `routeNameSplitter` example in migration docs
 (#25838)

---
 docs/7.migration/2.configuration.md | 38 +++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/docs/7.migration/2.configuration.md b/docs/7.migration/2.configuration.md
index 1ee7a3d042..5a1697b647 100644
--- a/docs/7.migration/2.configuration.md
+++ b/docs/7.migration/2.configuration.md
@@ -57,6 +57,44 @@ Nuxt configuration will be loaded using [`unjs/jiti`](https://github.com/unjs/ji
 
    ::
 
+1. If you were using `router.routeNameSplitter` you can achieve same result by updating route name generation logic in the new `pages:extend` hook:
+
+   ::code-group
+
+   ```ts [Nuxt 2]
+   export default {
+     router: {
+       routeNameSplitter: '/'
+     }
+   }
+
+   ```ts [Nuxt 3]
+   import { createResolver } from '@nuxt/kit'
+
+   export default defineNuxtConfig({
+     hooks: {
+       'pages:extend' (routes) {
+         const routeNameSplitter = '/'
+         const root = createResolver(import.meta.url).resolve('./pages')
+
+         function updateName(routes) {
+           if (!routes) return
+
+           for (const route of routes) {
+             const relativePath = route.file.substring(root.length + 1)
+             route.name = relativePath.replace(/\//g, routeNameSplitter).slice(0, -4)
+
+             updateName(route.children)
+           }
+         }
+         updateName(routes)
+       },
+     },
+   })
+   ```
+
+   ::
+
 #### ESM Syntax
 
 Nuxt 3 is an [ESM native framework](/docs/guide/concepts/esm). Although [`unjs/jiti`](https://github.com/unjs/jiti) provides semi compatibility when loading `nuxt.config` file, avoid any usage of `require` and `module.exports` in this file.