Vue i18n est la solution standard pour l'internationalisation (i18n) dans les applications Vue.js. Dans ce guide, je vous montrerai comment configurer Vue i18n dans Vue 3, Nuxt 3 et avec divers outils de build. ## Qu'est-ce que Vue i18n ? Vue i18n est un plugin développé par [Intlify](https://intlify.dev) qui vous permet de rendre votre application Vue multilingue. Il prend en charge : - Vue 2 et Vue 3 - Composition API et Options API - Pluralisation - Formatage des dates et des nombres - Chargement différé des traductions ## Installation de Vue 3 i18n ### Installer avec npm/yarn ```bash npm install vue-i18n@9 # ou yarn add vue-i18n@9 ``` ### Configuration de base dans Vue 3 ```javascript // src/i18n/index.js import { createI18n } from 'vue-i18n' const messages = { fr: { welcome: 'Bienvenue', greeting: 'Bonjour, {name} !' }, en: { welcome: 'Welcome', greeting: 'Hello, {name}!' } } const i18n = createI18n({ locale: 'fr', fallbackLocale: 'en', messages }) export default i18n ``` ```javascript // 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') ``` ## Utiliser Vue i18n dans les templates ### La fonction $t ```vue ``` ### Avec Composition API (useI18n) ```vue ``` ## Vue i18n changer de langue Il existe plusieurs approches pour changer dynamiquement la langue : ### Global ```javascript import i18n from '@/i18n' // Changer de langue i18n.global.locale.value = 'en' ``` ### Dans un composant ```vue ``` ## Nuxt i18n / Nuxt 3 i18n Pour les projets Nuxt, il existe le module officiel `@nuxtjs/i18n`. ### Installation ```bash npm install @nuxtjs/i18n ``` ### Configuration Nuxt 3 ```typescript // nuxt.config.ts export default defineNuxtConfig({ modules: ['@nuxtjs/i18n'], i18n: { locales: [ { code: 'fr', iso: 'fr-FR', file: 'fr.json' }, { code: 'en', iso: 'en-US', file: 'en.json' } ], defaultLocale: 'fr', lazy: true, langDir: 'locales/', strategy: 'prefix_except_default' } }) ``` ## Vue i18n avec Vite ### Plugin Vite Vue i18n Pour de meilleures performances et optimisation de build : ```bash npm install @intlify/unplugin-vue-i18n ``` ```javascript // vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' import { resolve } from 'path' export default defineConfig({ plugins: [ vue(), VueI18nPlugin({ include: resolve(__dirname, './src/locales/**') }) ] }) ``` ## Structurer les fichiers de traduction ### Fichiers JSON séparés par langue ``` src/ locales/ fr.json en.json de.json ``` ```json // locales/fr.json { "nav": { "home": "Accueil", "products": "Produits", "contact": "Contact" }, "auth": { "login": "Connexion", "logout": "Déconnexion", "register": "S'inscrire" } } ``` ### Chargement différé (pour les grands projets) ```javascript // i18n/index.js import { createI18n } from 'vue-i18n' const i18n = createI18n({ locale: 'fr', fallbackLocale: 'en', messages: {} }) export async function loadLocaleMessages(locale) { const messages = await import(`./locales/${'${locale}'}.json`) i18n.global.setLocaleMessage(locale, messages.default) return messages } export default i18n ``` ## Pluralisation Vue i18n ```json { "items": "aucun article | un article | {count} articles" } ``` ```vue ``` ## Questions fréquentes (FAQ) ### Comment changer la langue dans Vue i18n ? Utilisez `locale.value = 'en'` dans la Composition API ou `i18n.global.locale.value = 'en'` globalement. Les deux méthodes mettent à jour réactivement la langue dans toute l'application. ### Quelle est la différence entre Vue i18n et i18next ? Vue i18n est spécifiquement conçu pour Vue et offre une intégration profonde avec les fonctionnalités Vue comme Composition API et la Réactivité. i18next est agnostique au framework et peut être utilisé dans React, Angular ou Vanilla JS. ### Vue i18n supporte-t-il TypeScript ? Oui, Vue i18n offre un support complet de TypeScript. Avec l'interface `DefineLocaleMessage`, vous pouvez définir des clés de traduction typées qui permettent l'autocomplétion et la vérification de types. ### Comment charger les traductions dynamiquement (Lazy Loading) ? Utilisez les imports dynamiques : `const messages = await import('./locales/' + locale + '.json')` puis `i18n.global.setLocaleMessage(locale, messages.default)`. ## Conclusion Vue i18n est le meilleur choix pour l'internationalisation dans les projets Vue.js. Avec Vue 3 et la Composition API, la configuration est devenue encore plus simple. Pour les projets Nuxt, `@nuxtjs/i18n` offre une intégration transparente avec des fonctionnalités supplémentaires comme le routage automatique. Lors de la traduction de vos fichiers JSON Vue i18n, il est important que les placeholders comme `{name}` et le format ICU soient préservés. [shipglobal.dev](https://shipglobal.dev) gère automatiquement les formats de fichiers Vue i18n et préserve toute la syntaxe des variables. ## Articles connexes - [Vue i18n en JavaScript - Traduire en dehors des templates](/blog/vue-i18n-javascript) - [Guide Placeholder React i18next](/blog/react-i18next-placeholder) - [Guide Android i18n JSON](/blog/android-i18n-json-guide) ## Ressources supplémentaires - [Documentation Vue i18n](https://vue-i18n.intlify.dev/) - [Module Nuxt i18n](https://i18n.nuxtjs.org/) - [Intlify](https://intlify.dev/)

{{ $t('welcome') }}

{{ t('welcome') }}