> For the complete documentation index, see [llms.txt](https://cours.davidannebicque.fr/sae401/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cours.davidannebicque.fr/sae401/internationalisation-en-vuejs.md).

# Internationalisation en VueJs

Pour une application Vue.js en Composition API, le plus simple est d’utiliser [**Vue I18n**](https://vue-i18n.intlify.dev/) 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`

```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`

```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`

```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`

```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`

```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 :

```js
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 :

```js
<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