La création d'applications pour des personnes de différentes parties du monde comporte des défis tels que la prise en charge de plusieurs paramètres régionaux et comment l'intégrer dans votre application. Je me souviens que la première fois que j'ai fait face à ce défi, j'ai dû créer une application qui allait avoir plusieurs langues (anglais, yoruba et français). C'était la première fois que je me demandais comment des applications prenant en charge plusieurs langues ont été construites et aussi comment j'ai découvert «l'internationalisation».

Dans ce didacticiel, nous allons découvrir l'internationalisation et comment l'implémenter dans notre application Vue en utilisant le plugin Vue I18n en créant une application simple qui utilise ce plugin. Ce plugin vous aide à configurer votre application pour fonctionner avec plusieurs paramètres régionaux et permet à votre utilisateur de choisir entre tous les paramètres régionaux disponibles sans que vous en ayez trop à faire.

J'ai créé une application simple dans le cadre de ce didacticiel et elle peut se trouve sur Github .

Cet article nécessite une connaissance de base du framework Vue.js. Pour ceux qui cherchent à démarrer avec Vuejs, je vous recommande de commencer à partir de leur documentation officielle .

Que sont i18n et Vue-i18n?

Internationalisation (i18n)

L'internationalisation (parfois abrégée en «I18N, signifiant« I – dix-huit lettres – N ») est le processus de planification et la mise en œuvre de produits et services afin qu'ils puissent facilement être adaptés à des langues et cultures locales spécifiques, un processus appelé localisation . Imaginez que vous construisez un produit pour les personnes aux États-Unis et en France, sans internationalisation, cela signifierait la construction de deux applications distinctes dans des paramètres régionaux différents pour s'exécuter sur différents domaines (version anglaise sur amazingproduct.us et version française sur amazingproduct.fr). [19659005] C'est là que l'internationalisation entre en jeu. Il aide les gens des deux pays à utiliser facilement l'application dans les paramètres régionaux de leur choix (anglais ou français). L'internationalisation de votre application présente des avantages tels que:

1. Code source unique pour toutes les langues du produit.
2. Acceptation et satisfaction accrues des clients dans le pays.
3. Il facilite et simplifie la maintenance du produit. [19659017] Temps, coûts et efforts de localisation réduits (L10n).

Internationalisation dans Vue

L'internationalisation peut être implémentée dans Vue à l'aide du plugin Vue I18n . Il intègre facilement certaines fonctionnalités de localisation à votre application Vue.js. Il peut être ajouté à votre application de l'une des manières suivantes:

• Par téléchargement direct / CDN – en utilisant ce lien CDN pour la dernière version de NPM.

Après quoi, il sera inclus dans section head de votre fichier html.

• En installant depuis NPM ou Yarn.

 npm install vue-i18n
// ou
yarn add vue-i18n 

• En l'ajoutant à l'aide de Vue Cli 3.x (Vous avez besoin de Vue cli 3.x).

 vue add i18n 

Configuration de Vue-i18n dans votre application

Pour définir ce plugin dans votre application, nous allons utiliser la méthode CLI Vue. Cela peut être fait en utilisant cette commande:

 vue add i18n 

Lors de l'exécution de cette commande, vous serez invité à sélectionner les options de configuration à choisir. Pour ce tutoriel, je suis allé de l'avant pour sélectionner toutes les options par défaut pour configurer ce plugin. Cela ressemble à ceci:

Jetons un coup d'œil à ce qu'ils font:

1. La première option consiste à définir les paramètres régionaux par défaut dans lesquels l'application se trouverait et dans ce cas, je suis allé de l'avant pour définir
2. La ​​deuxième option consiste à définir un paramètre régional de secours pour l'application et le remplacement servira de paramètre régional de sauvegarde pour votre application si vous ne parvenez pas à fournir une traduction dans un autre paramètre régional et que j'ai sélectionné l'anglais. Ce sujet sera abordé plus loin dans cet article.
3. La ​​troisième option consiste à choisir un répertoire pour stocker tous les fichiers json locaux à utiliser pour la localisation dans l'application et j'ai sélectionné l'option par défaut qui est locales.
4. La ​​dernière option est d'activer la localisation basée sur les composants dans les composants à fichier unique. Cela signifie décider si vous souhaitez ou non activer la traduction à l'intérieur d'un composant et je l'ai activé dans ma configuration. Nous en parlerons plus loin dans l'article.

Une fois cela fait, votre plugin serait configuré pour fonctionner dans votre application et vous seriez informé de certains fichiers supplémentaires que ce plugin a ajoutés à votre application.

Jetons un coup d'œil à certains des fichiers qui ont été ajoutés à notre application afin que nous puissions comprendre leur fonction:

/ dossier locales

Ce dossier sert de base pour tous les paramètres régionaux qui seraient utilisés dans notre application. Si vous ouvrez ce dossier, vous trouverez un fichier en.json et c'est parce que en était mon environnement local sélectionné pour ce projet. Cela signifie que le fichier que vous trouverez dans votre dossier de paramètres régionaux dépend de votre choix lors de la configuration du plug-in.

/locales/en.json

Ce fichier sert à ajouter des textes dans les paramètres régionaux particuliers (nom de fichier par exemple en, fr) de sorte que lorsqu'un utilisateur bascule vers cet environnement local, votre application récupère tous vos textes du fichier JSON qui correspond à l'environnement local. Par défaut, ce fichier contient une propriété qui sert de démo pour configurer votre application, il ressemble à ceci:

 {
  "message": "bonjour i18n !!"
} 

Ici, nous avons une propriété message que nous pouvons utiliser n'importe où dans notre fichier en utilisant ce format:

 
 {{$ t ('message')}} 

si nous le voyons dans notre navigateur, ce que nous verrions serait la valeur de message et non "message".

Maintenant, si vous modifiez la valeur du message dans votre fichier, il sera mis à jour en conséquence dans votre navigateur.

HelloI18n.vue

Cette Le fichier sert d'exemple d'utilisation du plug-in dans Composants de fichier unique . Si vous inspectez le fichier, vous trouverez une balise dans la section script de ce composant. Selon la documentation, vous devez installer vue-i18n-loader pour utiliser cette balise mais vous n'avez pas à vous en préoccuper si vous l'ajoutez comme option de configuration lors de l'installation du plugin. À l'intérieur de cette balise, nous avons un objet qui contient la propriété en (ou vos paramètres régionaux par défaut) qui a une propriété hello avec une valeur. Cela ressemble à ceci:

 
{
  "en": {
    "bonjour": "Bonjour i18n en SFC!"
  }
}
 

Cela signifie que vous avez donné à un composant une valeur différente de celle trouvée dans le fichier en.json dans le dossier locales . Dans la section modèle de ce composant, nous avons:

Ici, nous voyons $ t ('') c'est la syntaxe pour référencer les textes ( t signifie textes) de notre plugin, et dans ce composant , nous utilisons la valeur de bonjour que nous avons ajoutée à l'intérieur de la balise i18n . Si nous vérifions notre navigateur, nous devrions voir Bonjour i18n dans SFC! même s'il n'y a pas de propriété bonjour dans le fichier en.json . C'est ce qu'on appelle la localisation basée sur les composants et nous y reviendrons plus loin dans cet article .

Formatage des textes

Ce plugin est fourni avec la possibilité de formater vos textes de différentes manières qui peuvent être utile pour améliorer l'expérience utilisateur et nous allons examiner certains de ces formats.

Formatage nommé

Ce type d'option de format vous permet d'ajouter une valeur dynamique à l'intérieur de votre texte qui serait définie lors du rendu du texte dans ton navigateur. Ce type de format est utile lorsque vous souhaitez ajouter un texte personnalisé avec les informations d'un utilisateur à la connexion ou après avoir effectué une action. Pour voir comment cela fonctionne, nous allons ajouter une nouvelle page à notre application et l'appeler formating.vue nous allons également l'ajouter comme itinéraire dans notre application.

, créons le fichier et ajoutons les lignes de code suivantes:

Dans la section modèle de ce fichier, nous utilisons ce plugin pour ajouter un titre (que nous n’avons pas encore ajouté) à cette page. À l'intérieur de la balise

nous utilisons le format nommé pour ajouter un message personnalisé à l'utilisateur qui s'affiche uniquement si ( v-show ) showMessage est vrai. Nous avons un formulaire avec un champ de saisie (connecté à nos données à l'aide de v-model) qui accepte un nom qui est transmis à notre plugin lorsque l'utilisateur soumet le formulaire. Nous avons une case à cocher qui masque le message et un bouton d'envoi qui bascule showMessage sur true .

Dans la section de script, nous avons nom et ] showMessage dans nos données. Ces deux variables sont utilisées dans notre formulaire pour stocker respectivement l'entrée de l'utilisateur et basculer le message.

Maintenant, ajoutons ce bonjour à notre fichier en.json (votre fichier de paramètres régionaux par défaut). Cela ressemble à ceci:

 {
  "formatingTitle": "Comment formater vos textes",
  "nom": "Quel est votre nom?",
  "bonjour": "Bonjour {name}, aujourd'hui est une bonne journée"
} 

Ici, formatingTitle est le titre de notre page de formatage tandis que bonjour utilise le format de nom que nous avons utilisé sur la même page.

Enfin, ajoutons cette page à notre fichier routeur. Cela ressemble à ceci:

 importation Vue de 'vue'
importer un routeur depuis 'vue-router'
importer Home depuis './views/Home.vue'
Vue.use (routeur)
exporter le nouveau routeur par défaut ({
  mode: 'histoire',
  base: process.env.BASE_URL,
  routes: [{
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/formatting',
      name: 'formatting',
      // route level code-splitting
      // this generates a separate chunk (about.[hash] .js) pour cette route
      // qui est chargé paresseusement lorsque l'itinéraire est visité.
      composant: () => import (/ * webpackChunkName: "format" * / './views/formatting.vue')
    }
  ]
}) 

Dans le fichier du routeur, nous utilisons le fractionnement de code au niveau de la route pour charger notre composant dans sa route (c'est-à-dire / formatage ) qui est une autre façon d'ajouter un

Maintenant, si nous naviguons vers / formatage dans notre navigateur, nous devrions voir ceci:

Maintenant, lorsque vous entrez une valeur dans le champ de saisie et appuyez sur Entrée, vous verrez un texte personnalisé au-dessus de votre champ de formulaire.

Formatage HTML

Cela implique d'utiliser du code HTML valide dans votre texte au lieu du texte brut. Cela peut être utile lorsque vous essayez d'afficher du texte au format HTML à l'utilisateur. Voyons comment cela fonctionne dans notre application.

Ajoutez ce qui suit à votre fichier de paramètres régionaux.

 {
  "htmlText": "
 HTML Rocks ❤❤ 
"
} 

Dans notre fichier formating.vue ajoutez les lignes de code suivantes après votre formulaire à la section du modèle de ce fichier.

 
 
 [19659031] Ici, nous utilisons la directive HTML  de Vue  pour lier notre texte à cette  div . Si vous le vérifiez dans votre navigateur, vous devriez voir la valeur de  htmlText  rendue et si vous inspectez l'élément div, vous devriez voir l'élément  h1  imbriqué à l'intérieur de ce div. [19659096] Page de formatage avec devtools ouverts en dessous. "/>
 Basculement entre les paramètres régionaux 
 Le passage d'un paramètre régional à un autre peut être effectué en ajoutant un fichier de ce format à votre dossier de paramètres régionaux. 
 Abréviation locale + json
// par exemple en.json, fr.json, ru.json, de.json 
 Après avoir créé ce fichier et ajouté un texte (par exemple 'bonjour') que nous voulons utiliser dans notre application, vous pouvez référencer un texte dans ce locale de deux manières:
   
 
 {{$ t ('bonjour', 'de')}} 
 
 Cela rendrait  bonjour mais en Deutsch en supposant que nous l'avons
 En utilisant globalement  this. $ i18n.locale :
 console.log (this. $ i18n.locale)
// affiche 'en.json' parce que 'en' est ma locale sélectionnée
this. $ i18n.locale = 'de'
// définit votre locale sur 'de' 
 Ajoutons un autre cas d'utilisation à notre application. La première chose que nous allons faire est d'ajouter un nouveau fichier à notre dossier de paramètres régionaux et de le nommer  de.json  puis d'ajouter cet objet ligne au fichier.
 {
  "maison": "Zuhause",
  "formatage": "Formatieren Sie Ihre Texte",
  "formatingTitle": "So formatieren Sie Ihre Texte",
  "nom": "Wie heißen Sie?",
  "bonjour": "Bonjour {nom}, heute ist ein guter Tag",
  "htmlText": ""
} 
 Nous avons déjà la version  en  de tout ici dans notre fichier  en.json  mais nous voulons pouvoir basculer entre  en  et  de  donc nous ajoutons la traduction Deutsch de ceci à notre  de.json  fichier.
 La prochaine chose serait d'ajouter un bouton qui permute entre  en  et  de  dans notre fichier  formating.vue . Ajoutez ceci à votre fichier:
   
 Dans la section modèle, nous avons ajouté un bouton avec un événement de clic qui change les paramètres régionaux de  en  à  de  ou vice versa. Nous avons également une variable  locale  qui change dynamiquement de  anglais  à  allemand . Dans la section script, nous avons ajouté une variable  locale  à la fonction de données de ce composant. Enfin, nous avons une méthode  switchLocale  qui est appelée chaque fois qu'un utilisateur clique sur le bouton. Cette méthode modifie la valeur de  this. $ I18n.locale  en utilisant un opérateur ternaire   pour déterminer sa propre valeur entre  de  et  en  sur la base sur ce que  local  est. Cela signifie que si  locale  est  anglais  this. $ I18n.locale  sera  en  et si  this. $ I18n. locale  est  de  locale  sera  anglais .
 Si vous affichez ceci dans votre navigateur, vous devriez voir ceci:
 Et lorsque vous cliquez sur le bouton, vous devriez voir que chaque texte sur votre page; dans ce composant et globalement, il est passé de l'environnement local par défaut à Deutsch.
 Si vous entrez votre nom et envoyez le formulaire, vous devriez également voir qu'il a été traduit et qu'il ressemble à ceci:
 Grand aperçu )
 Localisation et pluralisation de secours
 Localisation de secours
 Dans certains cas, la valeur d'une propriété n'est pas disponible dans les paramètres régionaux sélectionnés. Au lieu de votre application se bloquer en conséquence, il récupère la valeur du texte à partir des paramètres régionaux par défaut et imprime une erreur d'avertissement sur votre console. Prenons un exemple.
 Nous allons ajouter ce texte à notre fichier  en.json :
 {
  "fallbackLocale": "Localisation de secours",
  "placeholder": "Ceci est le texte de secours"
} 
 Et dans notre fichier  de.json nous allons seulement ajouter ceci:
 {
  "fallbackLocale": "Fallback-Lokalisierung"
} 
 Dans notre fichier  formating.vue ajoutez ce morceau de code à l'intérieur du fichier:
 
 
 Ici, nous avons ajouté un texte avec le nom de propriété  fallbackLocale  à l'intérieur d'une balise  h1  qui sert de titre à cette page. Nous avons également une balise  p  qui a un espace réservé de nom de propriété   à l'intérieur du plugin mais avec un autre paramètre,  de  qui, comme nous l'avons vu précédemment, est un moyen de dire au plugin de récupérer cette propriété dans les paramètres régionaux spécifiés ( de  dans ce cas).
 Maintenant, nous devrions voir ceci dans notre navigateur.
 Nous pouvons remarquer que bien que nous ayons défini  placeholder  sur  de le texte affiché est en  en . En effet, bien que nous ayons défini l'espace réservé   pour qu'il s'affiche dans un autre environnement local, il n'est pas traduit dans l'environnement local sélectionné, et par conséquent, le plug-in afficherait cette propriété dans l'environnement local par défaut lors de l'impression d'un message d'avertissement sur votre
 Pluralisation
 Il s'agit du processus consistant à donner une forme plurielle à un mot. Par exemple, vous créez une application de commerce électronique et vous souhaitez afficher un article dans le panier d'un utilisateur en fonction du nombre qu'il a dans son panier. Vous pouvez gérer la pluralisation dans votre plugin en utilisant un séparateur de canaux  |  entre toutes les formes plurielles dans votre région.
 Pour voir comment cela fonctionne, ajoutons-le à notre  en.json  fichier.
 {
  "développeur": "pas de développeur | un développeur | {n} développeurs"
} 
  Notez que la variable peut être appelée n'importe quoi mais je l'ai appelée  n . 
 Et dans votre  formating.vue  fichier, au lieu de en utilisant  $ t ('') nous utiliserions  $ tc ('')  qui accepte également un nombre comme deuxième paramètre ( n  que nous avons ajouté dans notre fichier de paramètres régionaux). Donc, si nous ajoutons les lignes de code suivantes à notre modèle:
 
 {{$ tc ('developer', 0)}} 
 {{$ tc ('developer', 1)}} [19659146] {{$ tc ('developer', 2)}} 
 
 Ici, nous définissons la première valeur de  n  à zéro, la seconde à 1 et la dernière une est mise à 2. Voyons à quoi cela ressemble dans notre navigateur.
 Nous pouvons voir que le plugin a traduit chaque valeur et utilisé le pluriel approprié en fonction de la valeur de  n .
  Lecture recommandée :  Comment effectuer une localisation de site Web: ne vous perdez pas dans la traduction 
 Localisation basée sur des composants
 Dans certains cas, vous n'aurez besoin que de quelques mots ou phrases dans un composant seul ou dans des instances lorsqu'un texte global a une signification différente dans un composant particulier et dans des cas comme celui-ci, la localisation basée sur les composants est très pratique. La localisation basée sur les composants est le processus de traduction de texte / groupe de textes à l'intérieur d'un composant, le rendant ainsi uniquement disponible à l'intérieur de ce composant. Une chose que nous devons noter est que la traduction disponible à l'intérieur de votre composant a priorité sur la traduction globale de sorte que si, par exemple, vous utilisez  bonjour  à plus d'un endroit dans votre application et que vous le souhaitez avoir un texte plus long ou plus personnalisé pour un composant, il vous suffit de créer une configuration de localisation pour ce composant et de définir votre nouvelle traduction de  bonjour .
 Si nous ouvrons nos  composants  , nous devrions voir un fichier  Helloi18n.vue  qui a été ajouté à notre application lorsque nous avons installé le plugin, ce composant a été ajouté pour servir de guide sur le fonctionnement de la localisation basée sur les composants.
 Pour comprendre mieux, ajoutons la traduction suivante à l'intérieur de notre élément  .
 
{
  "en": {
    "bonjour": "Bonjour, {nom}, c'est i18n dans SFC!",
    "salutations": "Localisation basée sur les composants",
    "placeholder": "Ceci est un texte de remplacement basé sur les composants"
  }
}
 
 Ici, nous ajoutons une traduction pour  bonjour  salutations  et  espace réservé qui sont tous également traduits dans le global  en Fichier .json .
 Et dans notre composant, ajoutons ce qui suit: