N
Nuxt•2mo ago
Danny Vogel

i18n nuxt: setting locale via lang query param

Hi all, I have 2 nuxt clients, one marketplace and one Oauth. I'd like to redirect to the oauth with a lang=es query param so that the OAuth knows which language to display in. While I have a working setup now, it does fetch the default english translations first before fetching the ones indicated in the lang query. Right now I have the follow plugin, setLocale.ts: 
export default defineNuxtPlugin((nuxtApp) => {
  const { $i18n } = useNuxtApp();
  const lang = useRoute().query.lang;
  if (lang && $i18n.localeCodes.value.includes(lang as any))
    $i18n.setLocale(lang as any);
});
export default defineNuxtPlugin((nuxtApp) => {
  const { $i18n } = useNuxtApp();
  const lang = useRoute().query.lang;
  if (lang && $i18n.localeCodes.value.includes(lang as any))
    $i18n.setLocale(lang as any);
});
and heres the i18n config in nuxt.config 
  i18n: {
    vueI18n: "./i18n.config.ts",
    locales: [
      {
        code: "en",
        language: "en-US",
        file: "getLocaleMessages.ts",
        cache: true,
        name: "English",
      },
      [..etc...]
    ],
    langDir: "locales",
    strategy: "no_prefix",
    defaultLocale: "en",
    detectBrowserLanguage: false,
  },
  i18n: {
    vueI18n: "./i18n.config.ts",
    locales: [
      {
        code: "en",
        language: "en-US",
        file: "getLocaleMessages.ts",
        cache: true,
        name: "English",
      },
      [..etc...]
    ],
    langDir: "locales",
    strategy: "no_prefix",
    defaultLocale: "en",
    detectBrowserLanguage: false,
  },
Using nuxt 4 and i18n nuxt v10.0.2
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Danny Vogel. 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 is no explicit documentation or example for handling the lang query parameter to set the locale before the initial translation fetch in Nuxt 4 with @nuxtjs/i18n v10.0.2. However, your approach of using a plugin to set the locale from the query parameter is reasonable and aligns with common Nuxt patterns. A few important points from the sources: - The i18n module supports dynamic locale switching and can be configured to use query parameters, but there is no direct mention of preemptively setting the locale before the initial translation fetch based on a query param like lang in the official docs or examples. - The Nuxt state management example shows how to use composables and state for locale, but does not address query param-based locale selection or SSR timing. - The Stack Overflow discussion about language selection via query params and cookies in Nuxt suggests using a watcher on the route query to update the language, but does not address the timing of translation fetching. Key Limitation:
The knowledge sources do not provide a way to ensure that the correct locale is set before the initial translation fetch when using a query parameter. This means that, as you observed, the default locale's translations may be loaded first, and then the correct ones after the locale is set. Potential Workaround (from sources): - You can use a watcher on the route query to update the locale and persist it (e.g., in a cookie), but this still happens after the initial load, not before SSR or hydration begins Stack Overflow Post. - For SSR, you might need to handle locale detection and setting at a lower level (such as in middleware or server-side composables), but the sources do not provide a concrete example for this with query params. Summary:
I'm sorry, but the knowledge sources do not contain enough information to guarantee setting the locale from a lang query parameter before the initial translation fetch in Nuxt 4 with @nuxtjs/i18n v10.0.2. Your current approach is as close as the sources suggest, but the initial fetch of the default locale appears to be a limitation not directly addressed in the documentation or examples provided. If you need to ensure the correct locale is set before any translation is fetched (especially for SSR), you may need to explore custom server middleware or a more advanced integration, but this is not covered in the available sources. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1111219371923210271> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?