i18n: fallback instead of 404
We use Nuxt 3 with the i18n module. Most pages have 10 locales, but the homepage should only “support” 5 (de, en, es, it, fr).
What we want:
- URLs like /nl/... (and other non-supported prefixes) should not 404.
- The homepage should still be reachable under all 10 prefixes, but render English content when the prefix isn’t one of the 5 supported ones.
If we use defineI18nRoute({ locales: ['de','en','es','it','fr'] }) then /nl 404s
Is there a recommended way to:
- keep all locale-prefixed routes alive (so no 404 for /nl), and
- force English rendering for the homepage when the current prefix isn’t in the allowed list?
2 Replies
Hi @luxterful. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
There’s nothing in the provided sources that describes exactly this “fallback-locale-per-page without 404” behavior for
The other i18n-related materials focus on: - Moving config into
- Proper use of browser-language detection (
- Using
- Correctly using route names for dynamic routes with
@nuxtjs/i18n on Nuxt 3, and I can’t see an officially documented pattern that matches your needs.
From the docs and examples we do have, defineI18nRoute({ locales: [...] }) is explicitly used to limit which locales a given page is available under, and other locales will 404, which is exactly what you’re seeing. [Dynamic routing]The other i18n-related materials focus on: - Moving config into
i18n.config.ts vs nuxt.config.ts ([i18n not working]; [browser detection])- Proper use of browser-language detection (
detectBrowserLanguage) and where its options must be configured ([browser detection fix])- Using
numberFormats / datetimeFormats in i18n.config.ts [Localization formats]- Correctly using route names for dynamic routes with
localePath [Dynamic routing]
None of these show an approach to:
1. Keep all locale-prefixed routes for a page “alive” (no 404) even when not declared in defineI18nRoute, and
2. Make that specific page render using a fallback locale (e.g. en) when the URL prefix is some other locale (e.g. /nl).
Given the information available, I don’t have a documented, recommended configuration or code snippet to achieve exactly this behavior. You may need to experiment (for example with middleware that inspects the current locale and forces setLocale('en') for unsupported ones) or consult the official @nuxtjs/i18n docs / issue tracker for more up‑to‑date guidance, but those patterns are not covered in the sources you provided.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@283905660436086784> Kapa.ai is still learning and improving, please let me know how I did by reacting below.