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.