Some projects will fetch data from an external source and use router.extendRoutes to create pages based on the source's response contents. In my case I fetch the data from Sanity and, given a _type and slug, I'll generate a page using one of my ignored page components.

Before adding @nuxtjs/i18n to my project, I was able to pass an array of route objects and Nuxt was using to create the pages I wanted. With this module enabled, Nuxt will try to render all of those pages for each of the available locales.

This is what doesn't work as expected (plus I couldn't find any examples of using the module like this). I have a PR ready for review (#1281) that is solving this issue on my local env. Since I'm not familiar with the codebase and all the ins and outs of the module I'm opening this issue first.

Version

@nuxtjs/i18n: v7.0.3
nuxt: v2.15.8

Nuxt configuration

• Applies to a site deployed to a static server (site generated with nuxt generate)
• Applies to a site deployed to a server with a Node backend

@nuxtjs/i18n configuration

// nuxt.config.js

const mapPages = ([key, { component, result }]) => ([key, { component: join(__dirname, component), result }])
const pages = { // on my codebase this is a groq query to Sanity
  "legal": {
    "component": "./pages/-legal.vue",
    "result": [
      {
        "_id": "unique-id-value-for-the-document",
        "lang": "en",
        "slug": "cookies-policy"
      },
      {
        "_id": "i18n.unique-id-value-for-the-document.es",
        "lang": "es",
        "slug": "politica-cookies"
      }
    ]
  }
}

const dynamicPages = Object.fromEntries(Object.entries(pages).map(mapPages))

export default {
  buildModules: [
    ['@nuxtjs/i18n', {
      locales: ['en', 'es'],
      defaultLocale: 'en',
      detectBrowserLanguage: false,
      vueI18n: {
        fallbackLocale: 'en',
        messages: {
          en: { welcome: 'Welcome' },
          es: { welcome: 'Bienvenido' },
        },
      },
    }],
  ],

  router: {
    extendRoutes (routes) {
      const buildRoutes = ([key, { result, component }]) => result.map(({ lang, slug, _id }) => {
        const name = _id.includes('i18n.') ? result.find((i) => i._id === _id.split('.')[1]).slug : slug
        const route = _id.includes('i18n.') ? `/${lang}/${slug}` : `/${slug}`
        return { name: `${name}___${lang}`, path: route, component, chunkName: `pages/${key}`, url: route }
      })

      return sortRoutes([
        ...routes,
        ...Object.entries(dynamicPages).map(buildRoutes).flat(),
      ])
    },
  },
}

• Dont' mind the unnecessary Object.entries(Object.fromEntries()), my config is split in two parts and one of them is shared accross different projects and I just copy/pasted the relevant parts for the issue.

Reproduction Link

https://codesandbox.io/s/test-nuxt-i18n-forked-2us3p

Steps to reproduce

1. Open the reproduction link
2. Open the browser URL from CodeSandbox on a new tab
3. Open the routes section inside vue-devtools, you should se something like this:

What is Expected?

I expect @nuxtjs/i18n to either:

• allow me to pass an array of valid routes without messing with them
• handle everything automagically for me (this might be hard to implement and would require users to provide those routes with everything the module could need to make it work)

What is actually happening?

The module is assuming each of those routes needs their localized counter parts and pushing them to the router. This breaks the theme-switcher functionality and pushes non-existent pages to the router, resulting in one build error for each of those.

It also prefixes the paths with each locale, resulting in some cases in a duplicated locale. Looks like this only happens because the module doesn't expect someone to provide custom routes.

I tried with different name routes, including/excluding the locale on the name route, and a bunch of other things. The approach shown on the config section of this issue is what made the most sense to me since it consist of manually writing the same route Nuxt and the module would generate for me.