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

i18n nuxt: setting locale via lang query param

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

i18n nuxt: setting locale via lang query param

Similar Threads

i18n nuxt: setting locale via lang query param

Similar Threads

Similar Threads

Similar Threads