Traduire un site construit avec VueJs/Nuxt
Aujourd’hui, je vous propose de voir comment traduire facilement un site web fait en VueJs / Nuxt. Dans notre exemple nous allons gérer deux langages.
Pour cet article, je vais supposer que vous avez un projet déjà initialisé avec Nuxt et que vous connaissez les bases de la configuration de Nuxt.
Les plugins utilisés
Pour traduire le site, j’ai utilisé les plugins vue-translate-plugin pour la gestion des traductions et vue-country-flag pour l’affichage des drapeaux permettant de switcher entre les différentes langues du site.
Gestion des traductions
On va commencer par installer vue-translate-plugin :
|
1 |
npm i --save vue-translate-plugin |
Ensuite, nous allons déclarer le plugin dans notre projet Nuxt. Dans la documentation nous voyons que nous pouvons déclarer le plugin et les locales de la sorte :
|
1 2 3 4 5 6 7 |
Vue.use(VueTranslate); Vue.locales({ spanish: { 'hello world': 'hola mundo' } }); |
Créons un plugin qui va charger des traduction que l’on va externaliser dans des fichiers séparé pour faciliter la maintenance:
/plugins/vue-translate-plugin.js
|
1 2 3 4 5 6 7 8 9 10 11 |
import Vue from 'vue'; import VueTranslate from 'vue-translate-plugin'; import fr from '@/translations/fr.js'; import en from '@/translations/en.js'; Vue.use(VueTranslate); Vue.locales({ "fr": fr, "en": en }); |
Comme vous pouvez le voir, à la 3ème et 4ème lignes, on importe les traductions pour les passer en parametre lors de la déclaration des “locales” plutôt que de les déclarer directement dans ce fichier.
Voici un exemple de fichier de traduction :
/translation/fr.js
|
1 2 3 4 5 6 7 8 9 10 |
export default { "oui": "oui", "non": "non", "OUI": "OUI", "NON": "NON", "civilite_label": "Civilité :", "nomNaissance_label": "Nom de naissance :", "nom_label": "Nom d'usage :", "prenom_label": "Prénom :" } |
Ensuite délarons nore plugin auprès de Nuxt via le fichier nux.config.js :
|
1 2 3 4 5 6 |
/* ** Plugins to load before mounting the App */ plugins: [ '~/plugins/vue-translate-plugin', ], |
Voila ❗ 😎 vous pouvez dors et déjà utiliser vos traductions (la langue par défaut est la première qui est paramétré). Comme nous l’explique la documentation, vous pouvez traduire vos textes de la sorte :
|
1 2 |
{{ t('civilite_label') }} <span v-translate>nom_label</span> |
Utiliser la langue du navigateur
C’est bien beau, mais pour le moment, notre traduction ne sert à rien puisque notre site utilise le premier langage qui est configuré. Je vous propose d’utiliser la langue par défaut du navigateur ou bien la langue ‘fr’ (par defaut) si nous ne gérons pas la langue du navigateur.
Pour faire cela, metez le code suivant dans votre layouts :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
methods: { changeLanguage: function(userLang) { this.$translate.setLang(userLang) // methode donnée dans la documentation pour changer la langue utilisé } }, mounted() { // initialiation de la langue du navigateur let browserLang = window.navigator.language || window.navigator.userLanguage // récupère la lague du navigateur if (browserLang != 'fr' && browserLang != 'en') { // si on ne gère pas la langue, on passe en fr browserLang = 'fr' } this.changeLanguage(browserLang) } |
Les commentaires dans le code devraient suffire à la compréhension global. J’ai créer une fonction ‘changeLanguage’ afin de pouvoir l’utiliser ailleurs par la suite. En cliquant sur des drapeaux correspondant à la langue par exemple 💡
Ajouter un sélecteur de langue
Il se peut que la langue du navigateur ne convienne pas à tout le monde. nous allons donc ajouter un sélecteur de langue sous forme de drapeaux. Pour cela, j’utilise le plugin vue-country-flag.
Installez le :
|
1 |
npm i --save vue-country-flag |
et créons un autre plugin pour le déclarer dans Nuxt :
/plugins/vue-country-flag.js
|
1 2 3 4 |
import Vue from 'vue' import CountryFlag from 'vue-country-flag' Vue.component('country-flag', CountryFlag) |
nux.config.js
|
1 2 3 4 5 6 7 |
/* ** Plugins to load before mounting the App */ plugins: [ '~/plugins/vue-translate-plugin', '~/plugins/vue-country-flag', ], |
Comme l’explique la documentation, nous pouvons désormais afficher le drapeau français de la sorte :
|
1 |
<country-flag country='fr' size='small' /> |
Je vous laisse, comme exercice, faire de vous même l’affichage conditionnel des drapeaux et le changement de la langue dans votre layout. Petit indice, pour simplifier la tache, utiliser une variable local permettant de stocker la langue courante.
Solution un peut plus bas…
|
|
|
|
|
|
|
|
|
|
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<template> <div> <div v-if='userLang !== "fr"' @click="changeLanguage('fr')"> <country-flag country='fr' size='small' /> </div> <div v-if="userLang !== 'en'" @click="changeLanguage('en')"> <country-flag country='gb' size='small' /> </div> <nuxt /> </div> </template> <script> export default { data() { return { userLang: 'fr' } }, methods: { changeLanguage: function(userLang) { this.userLang = userLang this.$translate.setLang(userLang) } }, mounted() { // initialiation de la langue du navigateur let browserLang = window.navigator.language || window.navigator.userLanguage if (browserLang != 'fr' && browserLang != 'en') { browserLang = 'fr' } this.changeLanguage(browserLang) } } </script> |
A propos de l'autheur
Jérémy
Chef de projet informatique spécialisé dans le domaine du web depuis plusieurs années et référent technique. En veille permanente, je me tiens à jour sur les nouveautés et évolutions afin de pouvoir réfléchir aux meilleurs outils à utiliser en fonction du besoin. De nature autonome et calme, j’aime travailler avec une équipe qui sait se remettre en question et qui cherche la solution la plus adéquate en fonction du problème et des délais imparties.