Configuration de l’internationalisation dans Vue.js

L’internationalisation (i18n) est cruciale pour développer des applications Vue.js accessibles à un public mondial.Ce guide vous plonge dans la structure du fichier i18n et l’utilisation de la bibliothèque vue-i18n pour gérer efficacement les traductions et créer des expériences utilisateur multilingues dans vos applications Vue.js.

1. Définir les messages traduits

• Créez un fichier i18n.ts (ou un nom similaire) pour stocker les traductions.
• Importez la bibliothèque vue-i18n et créez un objet messages pour contenir les traductions pour chaque langue.
• Chaque langue (par exemple, fr, en, es) devrait avoir son propre ensemble de traductions.
• Organisez les traductions en paires clé-valeur, où la clé est le texte à traduire et la valeur est le texte traduit.

import { createI18n } from "vue-i18n";

const messages = {
  en: {
    dashboard: "Dashboard",
    layoutBuilder: "Layout builder",
    craft: "Crafted",
    pages: "Pages",
    profile: "Profile",
  },
  fr: {
    dashboard: "Générateur de mise",
    layoutBuilder: "En page",
    craft: "Fabriqué",
    pages: "Pages",
    profile: "Profil",
  }

2.Créer l’instance i18n

Utilisez la fonction createI18n de vue-i18n pour créer une instance i18n.

Passez des options à la fonction pour configurer l’instance :

• legacy: false: Utilise la nouvelle API de composition pour i18n.
• locale: 'fr': Définit le français (fr) comme langue par défaut.
• globalInjection: true: Rend l’instance i18n accessible globalement.
• messages: Fait référence à l’objet messages contenant les traductions.

const i18n = createI18n({
  legacy: false,
  locale: "fr",
  globalInjection: true,
  messages,
});

3.Exporter l’instance i18n

Exportez l’instance i18n créée pour la rendre accessible à d’autres parties de l’application.

export default i18n;

4. Utiliser la traduction dans les composants

• Importez la fonction useI18n de vue-i18n dans votre composant.

import { useI18n } from "vue-i18n";

• Utilisez la fonction useI18n pour obtenir l’instance i18n.

 const i18n = useI18n();

• Obtenir  t de la fonction  useI18n que nous avons importés dans i18n.

 const { t } = useI18n();

• Utilisation t à l’intérieur de la section de gabaritt la fonction reçoit une fonction clé de traduction en tant que paramètre et valeur de traduction de retour en fonction du courant i18n.local pour traduire du texte..

 <div class="text-center mb-10">
        <h1 class="text-gray-900 mb-3">{{ t("connect") }}</h1>
        <div class="text-gray-500 fw-semibold fs-4">
          {{ t("no_count") }}
          <router-link to="/sign-up" class="link-primary fw-bold">
            {{ t("registration") }}
          </router-link>
        </div> 
 </div>