fix: definePageMeta name overriding localized route name

playground/pages/about/index.vue

@@ -32,6 +32,7 @@ export default defineComponent({
       }
     })
     definePageMeta({
+      name: 'named-about',
       title: 'pages.title.about'
     })
     return {}

playground/pages/index.vue

@@ -74,7 +74,8 @@ definePageMeta({
     <p>{{ $t('bar.buz', { name: 'buz' }) }}</p>
     <h2>Pages</h2>
     <nav>
-      <NuxtLink :to="localePath('/')">Home</NuxtLink> | <NuxtLink :to="localePath({ name: 'about' })">About</NuxtLink> |
+      <NuxtLink :to="localePath('/')">Home</NuxtLink> |
+      <NuxtLink :to="localePath({ name: 'named-about' })">About</NuxtLink> |
       <NuxtLink :to="localePath({ name: 'blog' })">Blog</NuxtLink> |
       <NuxtLink :to="localePath({ name: 'server' })">Server</NuxtLink> |
       <NuxtLink :to="localePath({ name: 'category-id', params: { id: 'foo' } })">Category</NuxtLink> |

specs/basic_usage.spec.ts

@@ -319,3 +319,15 @@ test('server integration extended from `layers/layer-server`', async () => {
   const resQuery = await $fetch('/api/server', { query: { key: 'snakeCaseText', locale: 'fr' } })
   expect(resQuery?.snakeCaseText).toMatch('À-propos-de-ce-site')
 })
+
+test('(#2581) `definePageMeta` name does not override localized routes', async () => {
+  const { page } = await renderPage('/')
+
+  expect(await page.locator('#link-products-named').getAttribute('href')).toEqual('/products')
+
+  // click `nl` lang switch with `<NuxtLink>`
+  await page.locator('#switch-locale-path-usages .switch-to-nl a').click()
+  await waitForURL(page, '/nl')
+
+  expect(await page.locator('#link-products-named').getAttribute('href')).toEqual('/nl/producten')
+})

specs/fixtures/basic_usage/nuxt.config.ts

@@ -18,7 +18,14 @@ export default defineNuxtConfig({
   i18n: {
     vueI18n: './config/i18n.config.ts',
     locales: ['en', 'fr'],
-    defaultLocale: 'en'
+    defaultLocale: 'en',
+    pages: {
+      // This is based on filename, not route name
+      products: {
+        en: '/products',
+        nl: '/producten'
+      }
+    }
     // debug: true,
   }
 })

specs/fixtures/basic_usage/pages/index.vue

@@ -120,6 +120,11 @@ useHead({
             To the page with spaces!
           </NuxtLink>
         </li>
+        <li class="path-products-named">
+          <NuxtLink id="link-products-named" :to="localePath({ name: 'products-named' })">
+            {{ $t('products') }}
+          </NuxtLink>
+        </li>
       </ul>
     </section>
     <section id="nuxt-link-locale-usages">

specs/fixtures/basic_usage/pages/products.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { defineI18nRoute } from '#i18n'
+
+// @ts-ignore
+definePageMeta({
+  name: 'products-named'
+})
+
+// defineI18nRoute({
+//   paths: {
+//     nl: '/producten',
+//     en: '/products'
+//   }
+// })
+</script>
+
+<template>
+  <div></div>
+</template>

src/bundler.ts

@@ -13,6 +13,7 @@ import type { PluginOptions } from '@intlify/unplugin-vue-i18n'
 import type { NuxtI18nOptions } from './types'
 import type { TransformMacroPluginOptions } from './transform/macros'
 import type { ResourcePluginOptions } from './transform/resource'
+import { RoutesPlugin, type RoutesPluginOptions } from './transform/routes'
 
 const debug = createDebug('@nuxtjs/i18n:bundler')
 
@@ -33,6 +34,10 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
     sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
   }
 
+  const routeOptions: RoutesPluginOptions = {
+    sourcemap: !!nuxt.options.sourcemap.server || !!nuxt.options.sourcemap.client
+  }
+
   /**
    * webpack plugin
    */
@@ -58,6 +63,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
 
     addWebpackPlugin(VueI18nWebpackPlugin(webpackPluginOptions))
     addWebpackPlugin(TransformMacroPlugin.webpack(macroOptions))
+    addWebpackPlugin(RoutesPlugin.webpack(routeOptions))
     addWebpackPlugin(ResourcePlugin.webpack(resourceOptions))
 
     extendWebpackConfig(config => {
@@ -105,6 +111,7 @@ export async function extendBundler(nuxt: Nuxt, nuxtOptions: Required<NuxtI18nOp
 
   addVitePlugin(VueI18nVitePlugin(vitePluginOptions))
   addVitePlugin(TransformMacroPlugin.vite(macroOptions))
+  addVitePlugin(RoutesPlugin.vite(routeOptions))
   addVitePlugin(ResourcePlugin.vite(resourceOptions))
 
   extendViteConfig(config => {

src/transform/routes.ts

@@ -0,0 +1,58 @@
+import createDebug from 'debug'
+import { pathToFileURL } from 'node:url'
+import { createUnplugin } from 'unplugin'
+import { parseURL } from 'ufo'
+import MagicString from 'magic-string'
+import { VIRTUAL_PREFIX_HEX } from './utils'
+
+export interface RoutesPluginOptions {
+  sourcemap?: boolean
+}
+
+const debug = createDebug('@nuxtjs/i18n:transform:routes')
+
+export const RoutesPlugin = createUnplugin((options: RoutesPluginOptions) => {
+  debug('options', options)
+
+  return {
+    name: 'nuxtjs:i18n-routes',
+    enforce: 'post',
+
+    transformInclude(id) {
+      debug('transformInclude', id)
+
+      if (!id || id.startsWith(VIRTUAL_PREFIX_HEX)) {
+        return false
+      }
+
+      return id.startsWith('virtual:nuxt:') && id.endsWith('routes.mjs')
+    },
+
+    transform(code, id) {
+      debug('transform', id)
+
+      const { pathname } = parseURL(decodeURIComponent(pathToFileURL(id).href))
+
+      const s = new MagicString(code)
+
+      function result() {
+        if (s.hasChanged()) {
+          return {
+            code: s.toString(),
+            map: options.sourcemap && !/\.([c|m]?ts)$/.test(pathname) ? s.generateMap({ hires: true }) : null
+          }
+        }
+      }
+
+      // Replace string
+      // name: (fileHashVariable?.name) ?? "(routeName)(___localeSuffix)"
+      s.replaceAll(
+        /name:\s(?<varName>.+)\s\?\?\s"(?<routeName>.+)(?<localeSuffix>___.+)"/g,
+        (_, varName, routeName, localeSuffix) =>
+          `name: (${varName} ? ${varName} + "${localeSuffix}" : undefined) ?? "${routeName}${localeSuffix}"`
+      )
+
+      return result()
+    }
+  }
+})