Language switcher in Nuxt 3 with nuxtjs/i18n

Question

This is Nuxt 3 with @nuxtjs/i18n

Packages:

//package.json
{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "dependencies": {
    "nuxt": "^3.11.2",
    "vue": "^3.4.21",
    "vue-router": "^4.3.0"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^8.3.0",
    "autoprefixer": "^10.4.19",
    "postcss": "^8.4.38",
    "tailwindcss": "^3.4.3"
  }
}

Config:

//nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts',
    locales: [
      {
        code: 'en',
        name: 'English',
      },
      {
        code: 'fr',
        name: 'Français'
      }
    ],
    strategy: 'prefix',
    defaultLocale: 'en',
    customRoutes: 'config',
    pages: {
      about: {
        en: '/about',
        fr: '/a-propos',
      },
    },
  }
})

i18n:

//i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      welcome: 'Welcome',
      home: 'Home',
      about: 'About'
    },
    fr: {
      welcome: 'Bienvenue',
      home: 'D’accuei',
      about: 'À Propos'
    }
  }
}))

Component:

//components/AppHeader.vue
<template>
  <div class="p-4 mb-4 bg-green-300">
    <div>
      <p> 
        <a href="#" v-for="locale in availableLocales" :key="locale.code" @click.prevent.stop="setLocale(locale.code)">
          set content to {{ locale.name }} ({{ locale.code }})
        </a>
      </p>
      <p>
        <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
          switch path to {{ locale.name }} ({{ locale.code }})
        </NuxtLink>
      </p>
    </div>
    <nav class="mt-8">
      <ul class="flex gap-2">
        <li><NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink></li>
        <li><NuxtLink :to="localePath('about')"> {{ $t('about') }}</NuxtLink></li>
      </ul>
    </nav>
  </div>
</template>

<script setup>
const { t, locale, locales, setLocale } = useI18n()
const localePath = useLocalePath()
const switchLocalePath = useSwitchLocalePath()
const availableLocales = computed(() => locales.value.filter(l => l.code !== locale.value))
</script>

I need to change the url to the other languages url with

<p>
  <NuxtLink v-for="locale in availableLocales" :key="locale.code" :to="switchLocalePath(locale.code)">
    switch path to {{ locale.name }} ({{ locale.code }})
  </NuxtLink>
</p>

if my url is /en/ it should switch to /fr/ and if my url is /en/about/ it should swith to /fr/a-propos/ and vive versa I need this also for other pages I will create I just tried to simplify it with one page.

can anyone figure out my mistake?

Answer 1

It seems that the issue was with vue-router@4.3.1. I received a recommendation to remove lock files and reinstall dependencies.

Answer 2

I just tested your code and it seems to work as expected: https://github.com/adesombergh/so-lang-switcher

Please note that certain browsers such as Safari will hide the complete site path by default and only shows the domain. You can disable this in preferences > advanced.