Pre-rendering multiple routes with i18n

[ExEr7um]

Describe the feature

Basically, I have some routes that I need to prerender for 7 different locales: /login, /login/sign-up, /login/forgot-password.

First, I tried to pre-render them using route rules:

routeRules: {
  "/login/**": {
    prerender: true,
  },
},

However, that didn’t work because, as stated in the Nuxt documentation, pages should be linked from other pages:

Everything under /blog gets prerendered as long as it is linked to from another page.

All my pages are linked, but they are linked using localePath, and I believe that because of this, the pre-renderer does not recognize that they are linked.

I found a workaround by manually adding routes to the Nitro pre-renderer array:

nitro: {
  prerender: {
    routes: [
      "/login",
      "/login/forgot-password",
      "/login/sign-up",
    ],
  },
},

This method successfully prerendered all routes, but only for my default locale. If I want to prerender all locales, I need to manually add each one to that array. With 7 different locales, I would need to add 21 different routes manually, which seems like poor UX.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide (The contribution guideline of nuxt-modules/i18n is compliant with Nuxt too).
• Check existing discussions and issues.

[AndersCV]

Do you have a LanguageSelector component that the crawler can use to detect your other locales and discover them correctly that way?

https://i18n.nuxtjs.org/docs/guide/lang-switcher

[ExEr7um]

Do you have a LanguageSelector component that the crawler can use to detect your other locales and discover them correctly that way?

https://i18n.nuxtjs.org/docs/guide/lang-switcher

I do, but since it’s a dropdown, the links to other locales are not present in the initial HTML.

[AndersCV]

Then I'd suggest to include them in the initial HTML and show/hide them using v-show instead of v-if.
This should enable your crawler to reach those pages and solve your issue.

Perhaps extend your dropdown component with a prop to control how the dropdown items are rendered.

[BobbieGoede]

Adding link based language switchers would be the recommended way to resolve your issue as already suggested, this is likely better for SEO as well.

We can probably add some way to ensure each localized version of a page is pre-rendered (but should make sure not to unnecessarily prerender pages) so I'm keeping this issue open for now, if there is more demand I can look into it.