Internationalisation (i18n) avec Vue

Pourquoi Internationalisation (i18n) avec Vue ?

L'internationalisation (i18n) est un processus essentiel pour créer des applications web multilingues, permettant aux utilisateurs de toutes langues d'interagir avec votre application sans difficulté. Dans le monde globalisé, avoir une application qui supporte plusieurs langues n'est plus optionnel mais indispensable.

Un cas d'utilisation concret : Imaginez que vous développez une application pour un e-commerce et que vous voulez atteindre des clients dans différentes régions du monde. Si votre application n'est disponible qu'en français, elle sera inutilisable pour les utilisateurs non francophones. Avec l'internationalisation, vous pouvez proposer votre application en plusieurs langues, améliorant ainsi la portée et l'accessibilité de votre produit.

Prerequis

• Connaissances Necessaires :

  • Maîtrise avancée des concepts de Vue.js.
  • Connaissance des bases de la structure d'un projet Vue.js.
  • Compréhension des composants, props et slots en Vue.

• Outils à Installer :

  • Node.js (v12.0.0 ou plus tard)
  • npm (package manager de Node.js)

Concepts Fondamentaux

1. Configuration de vue-i18n

La première étape consiste à installer le package vue-i18n et à configurer votre projet.

## Installation de vue-i18n via npm
npm install vue-i18n@latest

Créez un fichier i18n.js dans le répertoire src.

// src/i18n.js
import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  fr: {
    message: {
      hello: 'bonjour le monde'
    }
  }
};

const i18n = createI18n({
  locale: 'en', // langue par défaut
  messages, // objets de traduction
});

export default i18n;

2. Utilisation des traductions dans les composants

Incorporez le i18n dans votre application Vue.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

const app = createApp(App);
app.use(i18n); // Utilisation de vue-i18n dans l'application Vue
app.mount('#app');

Dans votre composant, vous pouvez maintenant utiliser les traductions.

<!-- src/components/HelloWorld.vue -->
<template>
  <div class="hello">
    $t('message.hello')
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

3. Changement dynamique de la langue

Ajoutez une fonctionnalité pour changer la langue à l'application.

<!-- src/App.vue -->
<template>
  <div id="app">
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('fr')">Français</button>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
}
</script>

Mise en Pratique : Projet Fil Rouge

Nous allons créer un simple gestionnaire de tâches multilingue. Nous utiliserons vue-i18n pour gérer les traductions.

Étape 1 : Installation et Configuration

## Création du projet Vue.js
npm init vue@latest

## Installation de vue-i18n
npm install vue-i18n@latest

Créez le fichier i18n.js comme précédemment.

Étape 2 : Création des composants

Créez un composant Task.vue.

<!-- src/components/Task.vue -->
<template>
  <div class="task">
    <input v-model="title" type="text" placeholder="Add task..." />
    <button @click="addTask">$t('message.add')</button>
    <ul>
      <li v-for="(task, index) in tasks" :key="index">
        task
        <button @click="removeTask(index)">$t('message.remove')</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.title.trim()) {
        this.tasks.push(this.title);
        this.title = '';
      }
    },
    removeTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

Étape 3 : Ajout de traductions

Ajoutez des traductions dans i18n.js.

// src/i18n.js
const messages = {
  en: {
    message: {
      hello: 'hello world',
      add: 'Add',
      remove: 'Remove'
    }
  },
  fr: {
    message: {
      hello: 'bonjour le monde',
      add: 'Ajouter',
      remove: 'Supprimer'
    }
  }
};

Étape 4 : Intégration du composant dans l'application

Modifiez App.vue pour inclure le composant Task.

<!-- src/App.vue -->
<template>
  <div id="app">
    <button @click="changeLanguage('en')">English</button>
    <button @click="changeLanguage('fr')">Français</button>
    <h1>$t('message.hello')</h1>
    <Task />
  </div>
</template>

<script>
import Task from './components/Task.vue';

export default {
  name: 'App',
  components: {
    Task
  },
  methods: {
    changeLanguage(lang) {
      this.$i18n.locale = lang;
    }
  }
};
</script>

Étape 5 : Ajout de styles

Ajoutez quelques styles pour rendre l'application plus attrayante.

/* src/assets/styles.css */
#app {
  text-align: center;
  margin-top: 60px;
}

.task input, .task button {
  margin: 10px;
}

N'oubliez pas d'importer les styles dans main.js.

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';
import './assets/styles.css';

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

Erreurs Frequentes et Debugging

1. Langue non définie

Code incorrect :

// src/i18n.js
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
};

Code correct :

// src/i18n.js
const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  fr: {
    message: {
      hello: 'bonjour le monde'
    }
  }
};

2. Traduction manquante

Code incorrect :

<!-- src/components/Task.vue -->
<template>
  <div class="task">
    $t('message.unknown')
  </div>
</template>

Code correct :

<!-- src/components/Task.vue -->
<template>
  <div class="task">
    $t('message.hello')
  </div>
</template>

3. Erreur d'installation

Code incorrect :

## Installation de vue-i18n via npm
npm install vue-i18n@latest

Code correct :

Assurez-vous que vous avez la dernière version de npm et exécutez :

npm init -y
npm install vue-i18n@latest

Pour Aller Plus Loin

1. Utilisation de plugins personnalisés

Vous pouvez créer des plugins personnalisés pour gérer les traductions plus complexes.

2. Intégration avec Vue Router

Intégrez vue-i18n avec vue-router pour une navigation multilingue.

3. Stockage des traductions dans un fichier JSON distant

Chargez les traductions depuis un fichier JSON distant plutôt que de les inclure directement dans votre code.

Défi Pratique :

Créez un gestionnaire de tâches multilingue avec vue-i18n et ajoutez une fonctionnalité pour filtrer les tâches par état (en cours, terminées).

Ce tutoriel a couvert le processus d'internationalisation en Vue.js, des concepts fondamentaux à la mise en pratique d'un projet complet. En suivant ces étapes, vous devriez être capable de créer une application web multilingue fonctionnelle et polyvalente.