Nuxt•2w ago

I18n Route translation

Hi, I have a question about route translation, I am working with a multilangual team and want to keep my folder structure and pages/ folder in english. But the main website will be in german only. Now I want to translate my routes to German but it doesnt really work via i18n, are there any other solutions: My folder structure:

pages/
  index.vue
   collections/
        index.vue

pages/
  index.vue
   collections/
        index.vue

nuxt.config

i18n: {
    strategy: 'no_prefix', // also tried all the other strategies
    defaultLocale: 'de',
    customRoutes: 'config',
    pages: {
      collections: {
        de: '/kollektionen'
      }
    }
  },

i18n: {
    strategy: 'no_prefix', // also tried all the other strategies
    defaultLocale: 'de',
    customRoutes: 'config',
    pages: {
      collections: {
        de: '/kollektionen'
      }
    }
  },

5 Replies

kapa.ai•2w ago

Hi @marlon_. 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 can offer some guidance on route translation in Nuxt using i18n. The approach you're trying to use is correct, but there might be a small issue in your configuration. According to the Stack Overflow post about i18n configuration (https://stackoverflow.com/questions/78240834), you need to move your i18n config to a separate i18n.config.ts file and then reference it in your nuxt.config.ts. Here's how you can modify your setup: 1. Create an i18n.config.ts file in your project root with the following content:

export default defineI18nConfig(() => ({
  defaultLocale: "de",
  pages: {
    'collections/index': {
      de: '/kollektionen'
    },
  },
}))

export default defineI18nConfig(() => ({
  defaultLocale: "de",
  pages: {
    'collections/index': {
      de: '/kollektionen'
    },
  },
}))

2. In your nuxt.config.ts, update the i18n configuration to reference this file:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    strategy: 'no_prefix',
    customRoutes: 'config',
  }
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    strategy: 'no_prefix',
    customRoutes: 'config',
  }
})

Note that in the pages configuration, you need to use the full path of the file relative to the pages directory, including index for index pages. If this doesn't solve your issue, you might want to consider using the extendRoutes option in your Nuxt configuration. According to the Nuxt documentation on custom routing (https://nuxt.com/docs/guide/recipes/custom-routing#nuxt-module), you can use the pages:extend hook to modify routes. Here's an example of how you could use it:

export default defineNuxtConfig({
  // ... other config
  hooks: {
    'pages:extend' (pages) {
      const collectionsPage = pages.find(page => page.path === '/collections')
      if (collectionsPage) {
        collectionsPage.path = '/kollektionen'
      }
    }
  }
})

export default defineNuxtConfig({
  // ... other config
  hooks: {
    'pages:extend' (pages) {
      const collectionsPage = pages.find(page => page.path === '/collections')
      if (collectionsPage) {
        collectionsPage.path = '/kollektionen'
      }
    }
  }
})

This approach directly modifies the route without relying on i18n, which might be simpler if you're only targeting German and don't need other i18n features. Remember to restart your Nuxt server after making these changes for them to take effect. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@297716170612539394> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

marlon_OP•2w ago

@kapa.ai That works but how would i go about it, if i have more routes and possibly dynamic routes with params

kapa.ai•2w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To handle multiple routes, including dynamic routes with parameters, you can extend your i18n configuration or use the pages:extend hook more extensively. Let's explore both approaches: 1. Using i18n configuration: For multiple routes, including dynamic ones, you can expand your i18n.config.ts file. Here's an example:

export default defineI18nConfig(() => ({
  defaultLocale: "de",
  pages: {
    'collections/index': {
      de: '/kollektionen'
    },
    'products/index': {
      de: '/produkte'
    },
    'products/[id]': {
      de: '/produkte/[id]'
    },
    'blog/[slug]': {
      de: '/blog/[slug]'
    }
  },
}))

export default defineI18nConfig(() => ({
  defaultLocale: "de",
  pages: {
    'collections/index': {
      de: '/kollektionen'
    },
    'products/index': {
      de: '/produkte'
    },
    'products/[id]': {
      de: '/produkte/[id]'
    },
    'blog/[slug]': {
      de: '/blog/[slug]'
    }
  },
}))

In this configuration, [id] and [slug] represent dynamic parameters. Nuxt will automatically replace these with the actual values when generating routes. 2. Using the pages:extend hook: For more complex scenarios or if you prefer a programmatic approach, you can use the pages:extend hook in your nuxt.config.ts:

export default defineNuxtConfig({
  // ... other config
  hooks: {
    'pages:extend' (pages) {
      pages.forEach(page => {
        if (page.path === '/collections') {
          page.path = '/kollektionen'
        } else if (page.path === '/products') {
          page.path = '/produkte'
        } else if (page.path.startsWith('/products/')) {
          page.path = page.path.replace('/products/', '/produkte/')
        } else if (page.path.startsWith('/blog/')) {
          // Keep the same structure for blog, just as an example
          page.path = page.path
        }
      })
    }
  }
})

export default defineNuxtConfig({
  // ... other config
  hooks: {
    'pages:extend' (pages) {
      pages.forEach(page => {
        if (page.path === '/collections') {
          page.path = '/kollektionen'
        } else if (page.path === '/products') {
          page.path = '/produkte'
        } else if (page.path.startsWith('/products/')) {
          page.path = page.path.replace('/products/', '/produkte/')
        } else if (page.path.startsWith('/blog/')) {
          // Keep the same structure for blog, just as an example
          page.path = page.path
        }
      })
    }
  }
})

This approach gives you more flexibility to handle complex routing scenarios and apply custom logic to your route translations. For dynamic routes, the pages:extend hook preserves the dynamic parts (like [id] or [slug]) while allowing you to change the static parts of the path. Remember that if you're using dynamic routes, you'll need to ensure that your page components are set up to handle these parameters correctly, typically using the useRoute() composable to access route parameters as shown in the Nuxt documentation (https://nuxt.com/docs/api/components/nuxt-link#passing-params-to-dynamic-routes). Whichever method you choose, make sure to restart your Nuxt server after making these changes for them to take effect. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@297716170612539394> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

I18n Route translation