Vue + vue-i18n : Le Guide Complet d'Internationalisation [2026]

Réponse Rapide

Pour implémenter l'internationalisation dans Vue avec vue-i18n, vous devez installer le paquet, configurer vos fournisseurs de langue, et utiliser les hooks/composants de traduction. vue-i18n est un choix standard pour les développeurs Vue en 2026, offrant des fonctionnalités robustes pour le changement de langue, la pluralisation et le formatage.

---

Introduction

Construire une application globale avec Vue nécessite une stratégie solide pour l'Internationalisation. Dans ce guide, nous verrons comment configurer vue-i18n depuis zéro, gérer les défis communs et optimiser votre flux de travail pour 2026.

Pourquoi vue-i18n ?

• Popularité : Largement adopté dans l'écosystème Vue.
• Fonctionnalités : Supporte les pluriels, le contexte et l'interpolation.
• Communauté : Documentation et exemples étendus.

---

Étape 1 : Installation

D'abord, ajoutez la dépendance à votre projet :

TerminalCopy
npm install vue-i18n

Étape 2 : Configuration

Configurez le plugin à la racine de votre application.

JavaScriptCopy
1import { createApp } from 'vue'
2import { createI18n } from 'vue-i18n'
3import App from './App.vue'
4
5const i18n = createI18n({
6  locale: 'en',
7  fallbackLocale: 'en',
8  messages: {
9    en: {
10      message: {
11        hello: 'hello world'
12      }
13    },
14    fr: {
15      message: {
16        hello: 'bonjour le monde'
17      }
18    }
19  }
20})
21
22const app = createApp(App)
23app.use(i18n)
24app.mount('#app')

Étape 3 : Utilisation

Comment traduire une chaîne dans un composant :

HTMLCopy
<template>
  <h1>{{ $t('message.hello') }}</h1>
</template>

---

Gestion des Traductions avec IntlPull

À mesure que votre application grandit, la gestion des fichiers JSON devient difficile. IntlPull automatise ce flux de travail :

1. Extraire : Récupérez les clés de votre code Vue.
2. Traduire : Utilisez l'IA pour traduire vers plus de 50 langues.
3. Synchroniser : Renvoyez les mises à jour vers votre dépôt.

TerminalCopy
npx @intlpullhq/cli push

---

Conclusion

L'implémentation de l'Internationalisation dans Vue est directe avec vue-i18n.

• Installez le paquet
• Configurez le plugin
• Utilisez $t dans vos modèles
• Utilisez IntlPull pour gérer vos traductions efficacement.