N
Nuxt•2d ago
r1me

Nuxt i18n - Nested Route translation does not work

Hi guys, I am using Nuxt i18n with the "config" option for the customRoutes... I have implemented the nested route example like it is implemented on the official documentation: https://i18n.nuxtjs.org/docs/guide/custom-paths#example-1-basic-url-localization However, the route url does not get translated, for all my root routes the translation works like a charm, however for example for my route called 'sukun' which will have a subroute called 'sukun/exercises', I have created a directory called 'sukun' and in there I have index.vue and exercises.vue, then I have added this to the nuxt.config.ts file like this: 
sukun: {
  en: "/sukun",
  nl: "/sukun",
  ... more languages
},
"sukun-exercises": {
  en: "/sukun/exercises",
  nl: "/sukun/oefeningen",
  ... more languages
},
sukun: {
  en: "/sukun",
  nl: "/sukun",
  ... more languages
},
"sukun-exercises": {
  en: "/sukun/exercises",
  nl: "/sukun/oefeningen",
  ... more languages
},
However this does not work... It only works for english because it is the default language. Can someone help me by this? Or did someone had this issue?
@nuxtjs/i18n
Custom Route Paths
Customize the names of the paths for specific locale.
2 Replies
kapa.ai
kapa.ai•2d ago
Hi @r1me. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your issue with nested route translation in Nuxt i18n. However, I can offer some general guidance and suggestions based on the available information. 1. First, make sure you're using the latest version of @nuxtjs/i18n compatible with Nuxt 3. The configuration you're using seems to be for an older version. 2. In Nuxt 3 with the latest @nuxtjs/i18n, the configuration should be in a separate i18n.config.ts file, not in nuxt.config.ts. This is mentioned in the Stack Overflow post about i18n configuration (https://stackoverflow.com/questions/78240834). 3. The custom routes configuration should be under the pages key in your i18n configuration. Here's an example of how it might look: 
export default defineI18nConfig(() => ({
  // other i18n config...
  pages: {
    'sukun/index': {
      en: '/sukun',
      nl: '/sukun',
      // more languages...
    },
    'sukun/exercises': {
      en: '/sukun/exercises',
      nl: '/sukun/oefeningen',
      // more languages...
    }
  }
}))
export default defineI18nConfig(() => ({
  // other i18n config...
  pages: {
    'sukun/index': {
      en: '/sukun',
      nl: '/sukun',
      // more languages...
    },
    'sukun/exercises': {
      en: '/sukun/exercises',
      nl: '/sukun/oefeningen',
      // more languages...
    }
  }
}))
4. Make sure you have set up the vueI18n key in your nuxt.config.ts to point to your i18n.config.ts file: 
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})
5. If you're still having issues, it might be worth checking if your file structure matches exactly what Nuxt expects for these routes. The files should be in pages/sukun/index.vue and pages/sukun/exercises.vue. If these suggestions don't resolve your issue, you might want to create a minimal reproduction of the problem and seek help on the Nuxt GitHub Discussions (https://github.com/nuxt/nuxt/discussions) or report a bug (https://nuxt.com/docs/community/reporting-bugs) if you believe it's a bug in the i18n module. Getting Help with Nuxt (https://nuxt.com/docs/community/getting-help) Reporting Bugs in Nuxt (https://nuxt.com/docs/community/reporting-bugs) Remember to provide as much detail as possible, including your Nuxt version, @nuxtjs/i18n version, and a minimal reproduction of the issue when seeking further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2d ago
<@272040635815428097> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?