Premiers pas

Créer une application globale avec Vue + Vue I18n est très simple. Avec Vue.js, nous composons déjà notre application avec des composants. En ajoutant Vue I18n au mélange, tout ce que nous avons besoin de faire est de préparer les messages de ressource et d'utiliser simplement l'API de localisation fournie par Vue I18n.

NOTE

Ce guide suppose que vous êtes déjà familier avec Vue lui-même. Vous n'avez pas besoin d'être un expert de Vue, mais vous pouvez parfois avoir besoin de vous référer à la documentation de base de Vue pour plus d'informations sur certaines fonctionnalités.

Un exemple

Nous allons considérer cet exemple :

• Exemple StackBlitz

Commençons par examiner le composant racine, App.vue.

App.vue

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

Dans le template, nous utilisons l'API de traduction $t injectée avec Vue I18n, pour la localisation. Cela permet à Vue I18n de changer la locale sans recréer le template, et également de prendre en charge l'application globale.

Vous obtiendrez la sortie suivante :

<h1>こんにちは、世界</h1>

Jetons un œil à la manière dont cela est réalisé en JavaScript !

Création de l'instance i18n

L'instance i18n est créée en appelant la fonction createI18n.

const i18n = createI18n({
  locale: 'ja',
  fallbackLocale: 'en',
  messages: {
    en: {
      message: {
        hello: 'hello world'
      }
    },
    zh: {
      message: {
        hello: '你好，世界'
      }
    }
  }
})

Nous pouvons spécifier quelques options à createI18n. Les options importantes sont les options locale, fallbackLocale, et messages.

locale est la langue de l'application Vue à localiser.

fallbackLocale est la langue vers laquelle revenir si la ressource clé spécifiée dans l'API de traduction $t n'est pas trouvée dans la langue de locale.

messages sont les messages locaux à traduire avec l'API de traduction $t. La structure des messages locaux est une structure d'objet hiérarchique avec chaque locale comme propriété principale

Enregistrement du plugin i18n

Une fois que nous avons créé notre instance i18n, nous devons l'enregistrer comme plugin en appelant use sur notre application :

const app = createApp(Vue)
app.use(i18n)
app.mount('#app')

Comme pour la plupart des plugins Vue, l'appel à use doit avoir lieu avant l'appel à mount.

Si vous vous demandez ce que fait ce plugin, certaines de ses responsabilités incluent :

1. Ajout des propriétés et méthodes globales telles que $t, $i18n
2. Activation des composables useI18n
3. Enregistrement global des composants i18n-t, i18n-d, et i18n-n.

Conventions de ce guide

Composants Mono-Fichier

Vue I18n est le plus souvent utilisé dans les applications construites avec un bundler (ex. Vite) et des SFCs (c'est-à-dire les fichiers .vue). La plupart des exemples de ce guide seront écrits dans ce style, mais Vue I18n lui-même ne nécessite pas l'utilisation d'outils de build ou de SFCs.

Par exemple, si vous utilisez les builds globaux de Vue et Vue I18n, les bibliothèques sont exposées via des objets globaux, plutôt que par des imports :

const { createApp } = Vue
const { createI18n, useI18n } = VueI18n

Style de l'API de composant

Vue I18n peut être utilisé avec l'API Composition et l'API Options. Lorsque cela est pertinent, les exemples de ce guide montreront des composants écrits dans les deux styles. Les exemples d'API Composition utiliseront généralement <script setup>, plutôt qu'une fonction setup explicite.

Si vous avez besoin d'un rappel sur les deux styles, consultez Vue - Styles d'API.

Vue I18n fonctionne avec l'API de composition Vue et l'API Options. Vue I18n a deux styles d'API comme Vue, l'API Composition et l'API héritée pour l'API Options.

IMPORTANT

Dans Vue I18n v9 et ultérieur, l'API proposée par Vue I18n v8.x est appelée mode Legacy API. L'API héritée est dépréciée dans Vue I18n v11, et supprimée dans Vue I18n v12. Nous recommandons l'utilisation du mode API Composition.

Les sections suivantes seront expliquées en utilisant l'API héritée.

Si vous souhaitez l'utiliser en style API Composition et que vous comprenez déjà Vue I18n, vous pouvez passer ici.