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 :

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 :

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

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

Ensuite délarons nore plugin auprès de Nuxt via le fichier nux.config.js :

 

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 :

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 :

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 :

et créons un autre plugin pour le déclarer dans Nuxt :

/plugins/vue-country-flag.js

nux.config.js

Comme l’explique la documentation, nous pouvons désormais afficher le drapeau français de la sorte :

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…

|

|

|

|

|

|

|

|

|

|

 

Ajouter un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *