Internationalisation en VueJs

Pour une application Vue.js en Composition API, le plus simple est d’utiliser Vue I18n en mode Composition API, avec createI18n({ legacy: false }), puis useI18n() dans les composants.

Approche recommandée

Structurer l’i18n autour de 5 idées :

1. un fichier d’initialisation unique

2. des fichiers de traductions séparés par langue

3. une langue courante stockée globalement

4. un changement de langue persistant

5. des clés de traduction stables et métiers

Vue I18n gère les messages, mais aussi les formats de dates et de nombres, ce qui est utile pour une vraie application multilingue.

---

1. Installation

npm install vue-i18n

2. Structure simple

Exemple d’arborescence :

src/
  i18n/
    index.js
    locales/
      fr.js
      en.js
  main.js
  App.vue

3. Déclarer les traductions

src/i18n/locales/fr.js

export default {
  app: {
    title: 'Mon application',
  },
  menu: {
    home: 'Accueil',
    users: 'Utilisateurs',
    settings: 'Paramètres',
  },
  auth: {
    login: 'Connexion',
    logout: 'Déconnexion',
    welcome: 'Bonjour {name}',
  },
  form: {
    required: 'Ce champ est obligatoire',
  },
}

src/i18n/locales/en.js

export default {
  app: {
    title: 'My application',
  },
  menu: {
    home: 'Home',
    users: 'Users',
    settings: 'Settings',
  },
  auth: {
    login: 'Login',
    logout: 'Logout',
    welcome: 'Hello {name}',
  },
  form: {
    required: 'This field is required',
  },
}

4. Configurer Vue I18n en Composition API

src/i18n/index.js

import { createI18n } from 'vue-i18n'
import fr from './locales/fr'
import en from './locales/en'

const defaultLocale = localStorage.getItem('locale') || 'fr'

export const i18n = createI18n({
  legacy: false,
  locale: defaultLocale,
  fallbackLocale: 'fr',
  messages: {
    fr,
    en,
  },
})

Le point important ici est bien legacy: false, nécessaire pour utiliser useI18n() avec la Composition API.

5. Brancher le plugin dans l’application

src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import { i18n } from './i18n'

const app = createApp(App)

app.use(i18n)
app.mount('#app')

6. Utilisation dans un composant avec Composition API

App.vue

<script setup>
import { useI18n } from 'vue-i18n'

const { t, locale } = useI18n()

function changeLocale(lang) {
  locale.value = lang
  localStorage.setItem('locale', lang)
}
</script>

<template>
  <div>
    <h1>{{ t('app.title') }}</h1>

    <nav>
      <a href="#">{{ t('menu.home') }}</a>
      <a href="#">{{ t('menu.users') }}</a>
      <a href="#">{{ t('menu.settings') }}</a>
    </nav>

    <p>{{ t('auth.welcome', { name: 'David' }) }}</p>

    <button @click="changeLocale('fr')">FR</button>
    <button @click="changeLocale('en')">EN</button>
  </div>
</template>

La fonction t() sert à traduire, et locale.value permet de changer la langue courante en Composition API.

7. Ajouter des dates et nombres localisés

Tu peux aller plus loin en définissant aussi des formats :

import { createI18n } from 'vue-i18n'
import fr from './locales/fr'
import en from './locales/en'

export const i18n = createI18n({
  legacy: false,
  locale: 'fr',
  fallbackLocale: 'fr',
  messages: { fr, en },
  datetimeFormats: {
    fr: {
      short: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      },
    },
    en: {
      short: {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
      },
    },
  },
  numberFormats: {
    fr: {
      currency: {
        style: 'currency',
        currency: 'EUR',
      },
    },
    en: {
      currency: {
        style: 'currency',
        currency: 'USD',
      },
    },
  },
})

Puis dans un composant :

<script setup>
import { useI18n } from 'vue-i18n'

const { d, n } = useI18n()

const today = new Date()
const amount = 1234.56
</script>

<template>
  <p>{{ d(today, 'short') }}</p>
  <p>{{ n(amount, 'currency') }}</p>
</template>

Vue I18n expose bien des fonctions dédiées aux dates et aux nombres dans son API Composition.

8. Bonnes pratiques

Utiliser des clés métiers stables

Éviter :

"bouton1": "Valider"

Préfèrer :

"form.submit": "Valider"

Ou :

"user.actions.save": "Enregistrer"

9. Possibilité avec un router

Il est possible aussi synchroniser la langue avec l’URL :

• /fr/...

• /en/...

Dans ce cas :

• la route porte la locale

• un guard met à jour i18n.global.locale.value

• le changement de langue redirige vers la même route avec un autre préfixe

C’est souvent la meilleure solution pour :

• le SEO

• le partage de lien

• la cohérence navigation/langue