nuxt-i18n change language && routing other page

Question

How could I use the following nuxt-links parallel at the same time under nuxt-i18n:

<nuxt-link :to="switchLocalePath('en')">EN</nuxt-link>

and

<nuxt-link :to="localePath('/about')">About</nuxt-link>

So, when I change the language it drops me automatically the about page.

Answer 1

You could probably use a @click on the link like this

<nuxt-link
  :to="switchLocalePath('en')" 
  @click="$router.push(localePath('/about'))"
>
  EN
</nuxt-link>

Idea taken from this source: https://github.com/nuxt-community/i18n-module/issues/476#issuecomment-539451906

Answer 2

Thank you for your suggestion!

Unfortunately, it seems that nuxt-link does not work together with @click, but works properly when I nested it, like this:

<div @click="$router.push(localePath('/about'))">
    <nuxt-link class="text-header-bold text-middle" :to="switchLocalePath('en')">EN</nuxt-link>
</div>

Answer 3

I encountered a similar issue when creating a language selector for a static site generator (SSG). I resolved it by creating a function that changes the current language and navigates to the corresponding language-specific URL.
I noticed that SSR and development mode have this behavior by default. However, statically generated pages only change the locale without navigation.

---

Nuxt: 3.2 • @nuxtjs/i18n: 8.0

---

<template>
  <!-- Lang selector -->
  <select
    class="header__lang-selector p2"
    v-model="currentLang"
    @change="changeLocale($event)"
  >
    <!-- Add available locales as selector options -->
    <option v-for="(lang, i) in availableLocales" :key="i" :value="lang">
      {{ lang }}
    </option>
  </select>
</template>

<script setup>
const localePath = useLocalePath();
const { locale, availableLocales } = useI18n();
const { setLocale } = useI18n();

const currentLang = ref(locale);

async function changeLocale(event) {
  setLocale(event.target.value);
  currentLang.value = event.target.value;

  // Change URL to correct language, ex: '/home' to '/fr/home'
  await navigateTo(localePath(useRoute().path));
}
</script>