N
Nuxt•3w ago
PC_001

Nuxt i18n pages:extend

Is there a way to avoid automatic localization of routes that are pushed within the pages:extend hook ? While using those settings: 
    strategy: 'no_prefix',
    customRoutes: 'config',
    multiDomainLocales: false,
    differentDomains: true,
    detectBrowserLanguage: false,
    strategy: 'no_prefix',
    customRoutes: 'config',
    multiDomainLocales: false,
    differentDomains: true,
    detectBrowserLanguage: false,
Id like to inject myself the localized routes from custom routes.
3 Replies
kapa.ai
kapa.ai•3w ago
Hi @PC_001. 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 provided knowledge sources, there isn't specific information about avoiding automatic localization of routes pushed within the pages:extend hook in Nuxt i18n. The knowledge sources don't contain enough information to directly answer your question about custom localization of routes injected through pages:extend. However, I can provide some relevant information about the pages:extend hook in Nuxt: The pages:extend hook allows you to add, change, or remove pages from the scanned routes at build time. This hook is called before the routes are processed further, including any potential i18n processing. Docs > Guide > Recipes > Custom Routing mentions: 
export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // remove routes
      function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
        // ... (code to remove pages)
      }
      removePagesMatching(/\.ts$/, pages)
    }
  }
})
export default defineNuxtConfig({
  hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // remove routes
      function removePagesMatching (pattern: RegExp, pages: NuxtPage[] = []) {
        // ... (code to remove pages)
      }
      removePagesMatching(/\.ts$/, pages)
    }
  }
})
While this doesn't directly address your i18n concern, it shows how you can manipulate routes at this stage. To avoid automatic localization, you might need to explore options within the i18n module configuration or consider injecting your localized routes after the i18n processing has occurred. For a more accurate and tailored solution to your specific use case with i18n, you may need to consult the Nuxt i18n module documentation or reach out to the Nuxt community forums for guidance on custom route localization within the pages:extend hook. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@940657350178635807> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
PC_001
PC_001OP•3w ago
Yeah the whole point is that this: 
hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })
hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })
Will endup creating those routes: {name: "profile___en", path: "/profile"}, {name: "profile___fr", path: "/profile"} I have no way to tell the french path from this NuxtPage schema, OR inject them with my own name appending ___en/fr telling nuxt NOT TO localize them afterwards, even if i was to OVERWRITE (or dare thinking it would) this french path in the i18n pages. This is actually triggered afters i18n initialization, so this would be the last known path for french profile___fr And like i said if we were to inject manually both english and french route for profile with their own path like This: 
hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile___en',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // add a route
      pages.push({
        name: 'profile___fr',
        path: '/whatever-fr',
        file: '~/extra-pages/profile.vue'
      })
hooks: {
    'pages:extend' (pages) {
      // add a route
      pages.push({
        name: 'profile___en',
        path: '/profile',
        file: '~/extra-pages/profile.vue'
      })

      // add a route
      pages.push({
        name: 'profile___fr',
        path: '/whatever-fr',
        file: '~/extra-pages/profile.vue'
      })
This would create routes like this: {name: "profile___en___en", path: "/profile"}, {name: "profile___en___fr", path: "/profile"},{name: "profile___fr___en", path: "/whatever-fr"}, {name: "profile___fr___fr", path: "/whatever-fr"}

Did you find this page helpful?