Traduire son site VueJs pour le rendre Multi-lingue

Traduire son site VueJs pour le rendre Multi-Lingue est très simple. Il suffit d’utiliser un package NPM bien pratique : vue-i18n.

Pour pouvoir installer le package comme expliqué ci-dessous via la commande NPM, il faudra avant tout avoir installé l’environnement de développement complet comme expliqué dans l’ebook gratuit disponible via le formulaire en dessous de cet article.

Installation de vue-i18n

Pour installer le package i18n, ouvrez votre projet et allez dans la console powershell pour y taper la commande suivante:

npm install vue-i18n

Une fois le package installé, il suffit d’aller dans votre js principal : src/main.js et y ajouter quelques lignes de code:

import VueI18n from 'vue-i18n' // Import de vue-i18n
...
Vue.use(VueI18n); // Utilisation de VueI18n dans Vue

// Création d'une instance i18n exportée pour être utilisée partout dans Vue
export const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en'
});
...
new Vue({
  i18n, // Utilisation de i18n
  render: h => h(App)
}).$mount('#app')

• La première ligne sert à importer vue-i18n dans notre javascript.
• La ligne Vue.use… sert à utiliser i18n dans Vue.
• La ligne export const i18n… sert à définir notre objet i18n pour être utilisé partout dans notre application. C’est ici qu’on définit les propriétés de notre objet : locale représente la langue actuelle pour les traductions tandis que fallbackLocale représente la langue à utiliser en cas de langue inconnue ou de traduction non définie dans la langue courante (c’est donc la langue à utiliser par défaut).

Utilisation de i18n

Une fois le package installé et configuré comme ci-dessus, on peut l’utiliser ce qui est très simple. Il existe 2 manières de travailler:

1. Directement via la propriété messages de notre objet déclaré dans main.js (export const …) : voir plus bas. Cela est plus rapide mais moins lisible car les traductions se trouve dans le code.
2. Via des fichiers: un fichier représente une langue de traduction. Pour se faire, il faudra également adapter notre objet pour lui définir où sont les fichiers en question. De cette manière, les traductions ne sont plus dans le code et sont même isolées dans un fichier par langue ce qui permet aussi d’importer des traductions faites par quelqu’un d’autre.

Les traductions dans le fichier js

Dans votre fichier js principal, vous avez à présent ajouté un export const i18n… Dans cette déclaration, il suffit d’ajouter la propriété messages avec les données de traductions. Prenons par exemple 2 phrases que nous souhaiterions rendre disponibles en multi-lingue : “Bonjour tout le monde” et “Bienvenue sur mon blog”. Pour ajouter ces 2 traductions dans notre fichier main.js, on va modifier l’export const i18n de la manière suivante:

export const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
      en: {
        Hello: "Hello everybody",
        Welcome: "Welcome on my blog"
      },
      fr: {
        Hello: "Bonjour tout le monde",
        Welcome: "Bienvenue sur mon blog"
      }
  }
});

En fait, on ajoute simplement les traductions au format JSon directement comme valeur de la propriété messages dans la déclaration de notre objet.

Il ne vous reste plus qu’à aller dans votre fichier App.vue pour y ajouter la visualisation de la traduction. Pour le moment, on va juste afficher la traduction dans la langue par défaut (ANGLAIS: “en” comme choisi dans la propriété “locale” de notre objet i18n). On verra après comment changer de langue. Voici donc le code modifié de notre App.vue:

<template>
  <div id="app">
    <p>{{ $t("Hello") }} - {{ $t("Welcome") }}</p>
  </div>
</template>

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

Vous voyez que la traduction se fait simplement par la méthode $t qui prend en paramètre la clé de traduction: “Hello” et “Welcome”.

Les traductions dans des fichiers JSon

Le principe est le même pour les fichiers: on va modifier notre fichier main.js pour que dans la déclaration de notre objet i18n, on puisse remplir la propriété messages. La seule différence est qu’au lieu de remplir la propriété messages directement dans le code, on va créer une fonction qui va aller récupérer les traductions au format JSon dans des fichiers séparés.

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: loadLocaleMessages()
})

A présent, il suffit de créer nos 2 fichiers fr.json et en.json dans un sous-dossier de src -> src/locales/en.json et src/locales/fr.json.

Dans notre fichier en.json, on reprend uniquement les traductions en Anglais ce qui permet d’isoler les traductions en Anglais et même de les demander à une tierce personne:

{
    "Hello": "Hello everybody",
    "Welcome": "Welcome on my blog"
}

Et dans notre fichier fr.json, on va reprendre les traductions en Français:

{
    "Hello": "Bonjour tout le monde",
    "Welcome": "Bienvenue sur mon blog"
}

Si vous rafraîchissait la page dans le navigateur, vous constaterez que la traduction fonctionne toujours comme dans la partie précédente.

Changer de langue

Pour changer de langue, rien de plus simple et sans devoir rafraîchir la page puisqu’on est en javascript (côté client), il suffit d’une ligne de code:

this.$i18n.locale = 'fr'

On va donc modifier notre fichier App.vue pour qu’il contienne une combo avec fr et en permettant de sélectionner la langue “fr” ou la langue “en”. Pour qu’elle soit liée à la propriété locale de l’objet $i18n, rien de plus simple: comme nous avons vu dans les cours précédents, il suffit d’utiliser l’instruction v-model. Voici donc à quoi ressemblera le code de votre fichier App.vue une fois modifié:

<template>
  <div id="app">
    <p>{{ $t('Hello') }} - {{ $t("Welcome") }}</p>
    <p>
      <select v-model="$i18n.locale">
        <option value="fr">fr</option>
        <option value="en">en</option>
      </select>
    </p>
  </div>
</template>

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

Voilà, j’espère que cet article vous aura plu. N’hésitez pas à vous abonner à ce blog pour ne rien manquer et si ce n’est pas encore fait, téléchargez votre ebook gratuit sous cet article pour pouvoir bénéficier d’un environnement de développement prêt à l’utilisation des packages NPM, prêt pour le déploiement, le testing…

Je vous dis à très bientôt sur développement-web-facile pour de nouveaux articles et plein de contenus intéressants et simples pour toutes et tous.