How localize route of an extended page?

[ritter1]

Hi

I have a project setup where I need two routes to the same page. Like this:

Route path /one is served by pages/one.vue
Route path /two is also served by pages/one.vue

Therefore, I created an extended page as follows:

export default defineNuxtConfig({
  modules: [
    (_, nuxt) => {
      nuxt.hook('pages:extend', (pages) => {
        pages.push({
          name: 'two',
          path: '/two',
          file: '~/pages/one.vue',
        });
      });
    },
    '@nuxtjs/i18n',
  ],
...
})

How (and where) can I localize the path of /two from fr/two to fr/deux?

See demo on Stackblitz

I also get a warning in terminal:

[@nuxtjs/i18n]: Couldn't find AnalizedNuxtPageMeta by NuxtPage (/two), so no custom route for it

which seems kind of related to this issue.

[iamntz]

@ritter1 hey mate, have you found a solution for this?

[ritter1]

@iamntz I outsourced all the code of pages/one.vue to a composable. Then I created pages/two.vue physically and used the new composable in there. So both pages share the same code base while I have all the i18n routing functionality available. Would be certainly worth to research, if there are better approaches available in the meantime..

[iamntz]

Thanks for the quick reply.

Unfortunately yoru approach is not really an option for me, so I'll have to find a way of doing it.

For those who are searching: I found a way, this can be done using ./app/router.options.ts and defining the pages there:

export default {
    routes: (_routes) => {
        const routes = [
            {name: 'index', path: '/', component: () => import('~/pages/index.vue')},
            {name: 'index___en', path: '/en', component: () => import('~/pages/index.vue')},
            {name: 'index___it', path: '/it', component: () => import('~/pages/index.vue')},
        ];
        return routes;
    },
} satisfies RouterConfig;

But this has it's own issues (e.g. definePageMeta becomes fiddly, e.g. you cannot set custom layouts anymore): nuxt/nuxt#26647

Would be nice if nuxt i18n would provide a way to augment the router with some custom defineI18nRoute args as meta...

[ponjs]

// router.options.ts

import type { RouterConfig } from '@nuxt/schema'
import { localizeRoutes, type I18nRoutingOptions } from 'vue-i18n-routing'
import type { RouteRecordRaw } from 'vue-router'
import { nuxtI18nOptions } from '#build/i18n.options.mjs'

export default {
  routes: _routes =>
    localizeRoutes(
      [
        {
          name: 'Home',
          path: '/',
          component: () => import('@/pages/home/page.vue'),
        },
        {
          name: 'About',
          path: '/about',
          component: () => import('@/pages/about/page.vue'),
        },
      ],
      nuxtI18nOptions satisfies I18nRoutingOptions
    ) as RouteRecordRaw[],
} satisfies RouterConfig