N
Nuxt•9mo ago
CS

Route switching when using i18n setLocale doesn't work...?

Hey there Nuxt community! I've been having a problem with my Nuxt application, (seemingly after upgrading my Nuxt package from 3.11.1 to 3.11.2 - but I'm not sure if that's the sole reason....) My problem is that when I switch the locale for my webapp, I don't have a "re-route" to the new route (for example from english ("/") to german ("/de-DE"), it stays on "/"). My current code looks something like this (like I said, after various iterations of things that didn't appear to work) 
<template>
  <nav>
    <div class="nav-icons">
      <div
        v-for="language in locales"
        :key="language.code"
        class="language"
        :class="{ active: locale === language.code }"
        @click.prevent.stop="onLocaleChange(language.code)"
      >
        <Icon :name="language.icon" />
        <span>{{ language.name }}</span>
      </div>
    </div>
    <div class="links">
      <NuxtLink v-for="link in links" :key="link.to" :to="localePath(link.to)">{{ link.text }}</NuxtLink>
      <NuxtLink :to="localePath({ path: '/', hash: '#sport-select' })">Sport Selection</NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts" setup>
const { locale, locales, setLocale } = useI18n();
const localePath = useLocalePath();
const router = useRouter();
const localeRoute = useLocaleRoute();
const switchLocalePath = useSwitchLocalePath();

const onLocaleChange = async (l: string) => {
  await setLocale(l);
  const switchPath = switchLocalePath(l);
  console.log(switchPath);
  router.push({
    replace: true,
    path: switchPath,
  });
};
<template>
  <nav>
    <div class="nav-icons">
      <div
        v-for="language in locales"
        :key="language.code"
        class="language"
        :class="{ active: locale === language.code }"
        @click.prevent.stop="onLocaleChange(language.code)"
      >
        <Icon :name="language.icon" />
        <span>{{ language.name }}</span>
      </div>
    </div>
    <div class="links">
      <NuxtLink v-for="link in links" :key="link.to" :to="localePath(link.to)">{{ link.text }}</NuxtLink>
      <NuxtLink :to="localePath({ path: '/', hash: '#sport-select' })">Sport Selection</NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts" setup>
const { locale, locales, setLocale } = useI18n();
const localePath = useLocalePath();
const router = useRouter();
const localeRoute = useLocaleRoute();
const switchLocalePath = useSwitchLocalePath();

const onLocaleChange = async (l: string) => {
  await setLocale(l);
  const switchPath = switchLocalePath(l);
  console.log(switchPath);
  router.push({
    replace: true,
    path: switchPath,
  });
};
I'm pretty sure that switchPath version used to work before I upgraded my Nuxt version.... But currently it doesn't anymore. The cookie value does get changed, but the site url doesn't, which sucks, cause when refreshing the page it will swap back to the original language (not the new one that it was supposed to use)... I'd really appreciate it if anyone could give me some pointers/things to try or knows any other tips! Thanks!
16 Replies
CS
CSOP•9mo ago
I checked through some of these too: https://i18n.nuxtjs.org/docs/guide/lang-switcher https://v8.i18n.nuxtjs.org/guide/lang-switcher https://v8.i18n.nuxtjs.org/api/composables#uselocaleroute
@nuxtjs/i18n
Lang Switcher
How to change your website's current language.
Lang Switcher
When Nuxt i18n module is loaded in your app, it adds your locales configuration to nuxtApp.$i18n (or this.$i18n), which makes it really easy to display a lang switcher anywhere in your app.
Composables
Composition API for Nuxt i18n module.
CS
CSOP•9mo ago
After some more random testing, this here seems to work, but i'm just still stumped, why the other cases don't really seem to do it for me...? 
<template>
  <nav>
    <div class="nav-icons">
      <NuxtLink
        v-for="language in locales"
        :key="language.code"
        class="language"
        :class="{ active: locale === language.code }"
        :to="localeRoute($route.path, language.code)"
      >
        <Icon :name="language.icon" />
        <span>{{ language.name }}</span>
      </NuxtLink>
    </div>
    <div class="links">
      <NuxtLink v-for="link in links" :key="link.to" :to="localePath(link.to)">{{ link.text }}</NuxtLink>
      <NuxtLink :to="localePath({ path: '/', hash: '#sport-select' })">Sport Selection</NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts" setup>
const { locale, locales } = useI18n();
const localePath = useLocalePath();
const localeRoute = useLocaleRoute();
</script>
<template>
  <nav>
    <div class="nav-icons">
      <NuxtLink
        v-for="language in locales"
        :key="language.code"
        class="language"
        :class="{ active: locale === language.code }"
        :to="localeRoute($route.path, language.code)"
      >
        <Icon :name="language.icon" />
        <span>{{ language.name }}</span>
      </NuxtLink>
    </div>
    <div class="links">
      <NuxtLink v-for="link in links" :key="link.to" :to="localePath(link.to)">{{ link.text }}</NuxtLink>
      <NuxtLink :to="localePath({ path: '/', hash: '#sport-select' })">Sport Selection</NuxtLink>
    </div>
  </nav>
</template>

<script lang="ts" setup>
const { locale, locales } = useI18n();
const localePath = useLocalePath();
const localeRoute = useLocaleRoute();
</script>
Galexrt
Galexrt•9mo ago
Try setting the locale.value and calling setLocale() 
locale.value = userLocale.value;
await setLocale(userLocale.value);
locale.value = userLocale.value;
await setLocale(userLocale.value);
I think I had a similar issue and when I used locale.value = 'en' it would work but not "persist", setLocale seems to do the persisting to cookie part if I remember correctly from the docs
CS
CSOP•9mo ago
Yeah I'm pretty sure setLocale(code) was in fact setting the cookie -> but it wasn't changing the route params (the prefixes)
Galexrt
Galexrt•9mo ago
Does setting the locale var from i18n help in your case?
CS
CSOP•9mo ago
You mean with this?
Galexrt
Galexrt•9mo ago
Yes, that code works for me to ensure the locale is set and "persisted" 
const { setLocale, locale } = useI18n();
locale.value = 'en-US';
await setLocale('en-US');
const { setLocale, locale } = useI18n();
locale.value = 'en-US';
await setLocale('en-US');
CS
CSOP•9mo ago
My nuxt config (i18n) by the way, in case it helps: 
i18n: {
    locales: [
      {
        code: "en-US",
        iso: "en",
        file: "en-US.json",
        name: "English",
        icon: "emojione:flag-for-united-states",
      },
      {
        code: "de-DE",
        iso: "de",
        file: "de-DE.json",
        name: "Deutsch",
        icon: "emojione:flag-for-germany",
      },
    ],
    defaultLocale: "en-US",
    detectBrowserLanguage: {
      fallbackLocale: "en-US",
    },
    langDir: "./locales/",
    vueI18n: "./i18n.config.ts",
    strategy: "prefix_except_default",
    lazy: true,
  },
i18n: {
    locales: [
      {
        code: "en-US",
        iso: "en",
        file: "en-US.json",
        name: "English",
        icon: "emojione:flag-for-united-states",
      },
      {
        code: "de-DE",
        iso: "de",
        file: "de-DE.json",
        name: "Deutsch",
        icon: "emojione:flag-for-germany",
      },
    ],
    defaultLocale: "en-US",
    detectBrowserLanguage: {
      fallbackLocale: "en-US",
    },
    langDir: "./locales/",
    vueI18n: "./i18n.config.ts",
    strategy: "prefix_except_default",
    lazy: true,
  },
CS
CSOP•9mo ago
Yeah that's what I was currently trying
No description
CS
CSOP•9mo ago
It does change the locale (like I mentioned), which is cool, but it doesn't also change the app's route
No description
Galexrt
Galexrt•9mo ago
Oh I didn't see those lines
CS
CSOP•9mo ago
npnp And yeah, this version does seem to work, I'm just confused why the others (with switchLocalePath and all) didn't :d
Galexrt
Galexrt•9mo ago
Yeah, I can understand why. Even though the https://i18n.nuxtjs.org/docs/guide/lang-switcher#vue-i18n-caveat doesn't recommend it, I didn't get it to work another way in my app though I don't use routing prefixes in my case.
@nuxtjs/i18n
Lang Switcher
How to change your website's current language.
CS
CSOP•9mo ago
Thanks for the help though! Appreciated
Galexrt
Galexrt•9mo ago
Maybe someone else can chime in that knows more about vue-i18n/ NUXT i18n module, that can help with your issue and I'll maybe get smarter about not using locale.value anymore for my case 😄
CS
CSOP•9mo ago
Yeah I have a lot to learn with it too :D
Want results from more Discord servers?
Add your server