fix: custom nested route path for configration (nuxt-modules#1531)

closes nuxt-modules#1502

docs/content/30.guide/4.custom-paths.md

@@ -56,10 +56,10 @@ Say you have some nested pages like:
 
 ```asciidoc
 pages/
-├── _nested/
-├──── _route/
+├── [nested]/
+├──── [route]/
 ├────── index.vue
-├────── _.vue
+├────── [...slug].vue
 ```
 
 Here's how you would configure these particular pages in the configuration:
@@ -73,10 +73,10 @@ export default defineNuxtConfig({
   i18n: {
     parsePages: false,
     pages: {
-      '_nested/_route/index': {
-        en: '/mycustompath/:nested/:route?' // Params need to be put back here as you would with vue-router
+      ':nested/:route': {
+        en: '/mycustompath/:nested/:route' // Params need to be put back here as you would with vue-router
       },
-      '_nested/_route/_': {
+      ':nested/:route/:slug(.*)*': {
         en: '/mycustompath/:nested/*' // * will match the entire route path after /:nested/
       }
     }
@@ -117,27 +117,21 @@ export default defineNuxtConfig({
     parsePages: false,
     pages: {
       about: {
-        en: '/about',
         fr: '/a-propos',
       },
-      'services/index': {
-        en: '/services',
+      services: {
         fr: '/offres',
       },
-      'services/development/index': {
-        en: '/services/development',
+      'services/development': {
         fr: '/offres/developement',
       },
-      'services/development/app/index': {
-        en: '/services/development/app',
+      'services/development/app': {
         fr: '/offres/developement/app',
       },
-      'services/development/website/index': {
-        en: '/services/development/website',
+      'services/development/website': {
         fr: '/offres/developement/site-web',
       },
-      'services/coaching/index': {
-        en: '/services/coaching',
+      'services/coaching': {
         fr: '/offres/formation',
       }
     }

specs/custom_route_paths.spec.ts/module_configration.spec.ts

@@ -13,6 +13,12 @@ await setup({
       pages: {
         about: {
           fr: '/about-fr'
+        },
+        blog: {
+          en: '/news'
+        },
+        'blog/article': {
+          en: '/news/article'
         }
       }
     }
@@ -30,9 +36,28 @@ test('can access to custom route path', async () => {
   // page path
   expect(await getData(page, '#home-use-async-data')).toMatchObject({ aboutPath: '/fr/about-fr' })
 
-  // goto /about-fr
+  // navigate to about page for `fr`
   await page.locator('#link-about').click()
 
   expect(await getText(page, '#about-header')).toEqual('À propos')
   expect(await getText(page, '#lang-switcher-current-locale code')).toEqual('fr')
+  expect(await page.url()).include('/fr/about-fr')
+})
+
+test('can access to custom nested route path', async () => {
+  const home = url('/')
+  const page = await createPage()
+  await page.goto(home)
+
+  // navigate to blog index page
+  await page.locator('#link-blog').click()
+  await page.waitForTimeout(1000)
+
+  expect(await page.url()).include('/news')
+
+  // navigate to blog article page
+  await page.locator('#link-blog-article').click()
+  await page.waitForTimeout(1000)
+
+  expect(await page.url()).include('/news/article')
 })

specs/fixtures/basic/locales/en-US.json

@@ -1,6 +1,7 @@
 {
   "home": "Homepage",
   "about": "About us",
+  "blog": "Blog",
   "posts": "Posts",
   "dynamic": "Dynamic"
 }

specs/fixtures/basic/locales/fr-FR.json

@@ -1,6 +1,7 @@
 {
   "home": "Accueil",
   "about": "À propos",
+  "blog": "Blog",
   "posts": "Articles",
   "dynamic": "Dynamique"
 }

specs/fixtures/basic/pages/blog/article.vue

@@ -0,0 +1,3 @@
+<template>
+  <p>This is blog article page</p>
+</template>

specs/fixtures/basic/pages/blog/index.vue

@@ -0,0 +1,4 @@
+<template>
+  <p>This is blog index page</p>
+  <NuxtLink id="link-blog-article" exact :to="localePath('blog-article')">article</NuxtLink>
+</template>

specs/fixtures/basic/pages/index.vue

@@ -45,5 +45,6 @@ useHead({
       <code id="home-use-locale-head">{{ i18nHead }}</code>
     </section>
     <NuxtLink id="link-about" exact :to="localePath('about')">{{ $t('about') }}</NuxtLink>
+    <NuxtLink id="link-blog" exact :to="localePath('blog')">{{ $t('blog') }}</NuxtLink>
   </div>
 </template>

src/pages.ts

@@ -43,7 +43,7 @@ export function setupPages(
   })
 }
 
-function getRouteOptionsResolver(
+export function getRouteOptionsResolver(
   pagesDir: string,
   options: Pick<Required<NuxtI18nOptions>, 'pages' | 'defaultLocale' | 'parsePages'>
 ): RouteOptionsResolver {
@@ -69,9 +69,13 @@ function getRouteOptionsFromPages(
     paths: {}
   }
   const pattern = new RegExp(`${pagesDir}/`, 'i')
-  // TODO: we might be needed support for vite, this is for webpack
-  const chunkName = route.chunkName ? route.chunkName.replace(pattern, '') : route.name
-  const pageOptions = chunkName ? pages[chunkName] : undefined
+  // prettier-ignore
+  const path = route.chunkName
+    ? route.chunkName.replace(pattern, '') // for webpack
+    : route.path  // vite and webpack
+      ? route.path.substring(1) // extract `/`
+      : route.name
+  const pageOptions = path ? pages[path] : undefined
   // routing disabled
   if (pageOptions === false) {
     return null