Nested route path was not translated

[fecoderchinh]

I have the following page routes configuration:

pages: {
      'index': {
        en: '/',
        vi: '/'
      },
      'account': {
        en: '/account',
        vi: '/tai-khoan'
      },
      'account-general': {
        en: '/account/general',
        vi: '/tai-khoan/chung'
      }
    }

I also have a /account/index.vue page that automatically redirects to /account/general.

However, when I switch to Vietnamese (vi) and check the result, the redirection is incorrect, leading to /tai-khoan/general instead of the correct /tai-khoan/chung

Has anyone else encountered this issue? How did you resolve it?

[fecoderchinh]

I believe the issue was related to the configuration in nuxt.config.ts. The documentation may not have been entirely clear about how to handle paths for localized routes

The correct structure for pages should be:

pages: {
  'account': {
    en: '/account',
    vi: '/tai-khoan'
  },
  'account/general': {
    en: '/account/general',
    vi: '/tai-khoan/chung'
  },
}

Then i replaced the / with - when calling localePath

Here’s how I corrected it:

<UButton label="Account General" :to="localePath('account-general')" />

This resolved the issue where the incorrect Vietnamese path (/tai-khoan/general) was being generated, and now it correctly redirects to /tai-khoan/chung.

[r1me75]

@fecoderchinh I have tried to implement your solution, the child route now gets translated correctly however the parent route doesn't... It's sad that the docs are outdated on this matter... Did your solution work both on the parent and the child?

[BobbieGoede]

@fecoderchinh I'm glad the issue is resolved for you, but I'm a bit puzzled since your solution is normally not the correct way to configure this.

@r1me75 The keys in the pages object should use the route names, these are generated by Nuxt based on your pages directory structure or use a custom name if configured.

You can either check the route names in Vue/Nuxt devtools or if you're on the latest version of Nuxt I18n you can enable Nuxt's experimental.typedPages together with Nuxt I18n's i18n.experimental.typedPages, this will give you type completion on the pages object (and for functions like localePath as well). This may require starting the project in dev mode for the types to be generated.

If you're still running into issues or have questions, it would be easiest for me to help out if a minimal reproduction is provided.

[r1me75]

@BobbieGoede Sure! Here is a minimal reproduction:

nuxt.config.ts:

i18n: {
    experimental: {
      typedPages: true,
    },
    customRoutes: "config",
    pages: {
      sukun: {
        en: "/sukun",
        nl: "/sukun",
        tr: "/cezm",
      },
      "sukun-exercises": {
        en: "/sukun/exercises",
        nl: "/sukun/oefeningen",
        tr: "/cezm/alistirmalar",
      },
      ... other routes
    },
    locales: [
      {
        code: "en",
        file: "en-US.json",
        language: "en-US",
        name: "English",
        dir: "ltr",
      },
      ... others
    ],
    lazy: true,
    defaultLocale: "en",
  },

'pages' directory structure:

• pages (dir):
  • sukun (dir)
    • index.vue
    • exercises.vue
  • index.vue

Navigating with NuxtLinkLocale:

<NuxtLinkLocale :to="menu.href" activeClass="bg-secondary">
                <Icon :name="menu.icon" class="mr-4" :size="20" />
                <p class="">
                  {{ $t(menu.label) }}
                </p>
 </NuxtLinkLocale>

When navigating the href is for the parent route ('sukun') and for the child route ('sukun-exercises')... This is also how it should be done according to the docs... However when implementing like this the page url does not get translated.

When implementing @fecoderchinh approach the child routes are getting translated but the parent route stays the same? I mean I really do not understand this hopefully you can help me!

[github-actions[bot]]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction starter (v8 and higher) 👉 Reproduction starter (edge)

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[BobbieGoede]

@r1me75 Could you provide a stackblitz project or a github repository the reproduces the issue? I don't think the snippets you shared will be sufficient in debugging the issue, there could be other configs and structures at play.

[r1me75]

@BobbieGoede Sorry for the late response! Here is a stackblitz project with the issue reproduced... If you navigate to 'projects' page you will see in the english url that is 'projects' and when you translate to dutch it get's translated to 'projecten'... However with the parent - child route -> about and about-more page this does not happen

Stackblitz: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-1k75j2vp?file=pages%2Fprojects.vue

Note: open preview in new tab to see the url changes

[BobbieGoede]

Thank you for the reproduction 🙏

It looks like @fecoderchinh is actually right, and I have somehow convinced myself that the configuration should be using the route names, even going so far as to have types generated for it 🤦...

@r1me75 So there's two things that need addressing in your reproduction to make things work as intended

1. Use the about/more key to set the custom pages (more on this below)
2. Nested/child routes rely on there being a page component with the same name as the folder that renders the child routes, this is best shown in Nuxt's documentation: https://nuxt.com/docs/guide/directory-structure/pages#nested-routes

Here's your reproduction but modified with these changes: https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-tlqpi1ny?file=nuxt.config.ts,pages%2Fabout.vue

So clearly the keys in the pages object do need to use the directory path syntax for things to work, while the documentation and generated types use the route name as keys. I will look into making both approaches work temporarily, deprecating the undocumented but working one in v10, and eventually dropping it in v11.

It also looks like the documentation incorrectly shows the nested/child route structure, missing the parent route page components, so this will need to be fixed as well.

Sorry for the inconvenience, let me know if you have more questions!

[r1me75]

@BobbieGoede Thank you so much! I wish you a nice week 🚀