VUE-LNG
en
Welcome to the view-lng page
view-lng is a plugin facilitating multilingual projects in Vue.js.
How to use
Installation
After creating a Vue.js project You have to install the package:
npm i vue-lng
Then, in the ** mains.js ** file at the root of the project, you need to import the plugins:
import lng from "vue-lng";
The plugin is now present in the project
Configuration
To add the plugin to the view instance:
Vue.use(lng, {
debug: false, // OPTIONNAL (default = true)
startOne: false, // OPTIONNAL (default = false)
language: "fr", // OPTIONNAL (default = autodetect browser language)
fallback: "en",
messages: {
en: require("./locales/en.json"),
fr: require("./locales/fr/")
}
});
- debug (optionnal) : ashow or hide error and warning information (true by default). ex: process.env.NODE_ENV
- startOne (optionnal) : sets the starting index for pluralization, false = 0 (default) or true = 1.
- language : (optionnal) is the default language to use. _ "fr" _ is an example.
- fallback : if the message is not found in the language of translation, the message is searched in this language.
- messages : is an object representing the translation messages. He can be :
- a direct json:
messages: {
en: {
title : "Welcome on my website",
cart : "Cart",
...
},
fr: {
title : "Bienvenue sur mon site",
cart : "Panier",
...
}
}
- an import of file, unique (en.json), or multiple (fr) and in this case, it is necessary to use a file js of import as the example shows. Suppose the following structure:
mains.js
locales/
|_ en.json
|_ fr/
|_ home.json
|_ menu.json
|_ index.js
We can configure the plugin this way:
messages: {
en: require("./locales/en.json"),
fr: require("./locales/fr/")
}
For the en.json file:
{
home : {
title : "Books page",
count : "There is {N} book(s)",
gender : "With {0} thrillers, {1} mangas",
author : "{0} author|{0} authors",
...
},
menu: {
home : "Home",
about : "A propos",
...
}
}
For fr/index.js file (example) :
export * from './home.json';
export * from './menu.json';
For home.json file
home: {
title : "Page de livres",
count : "Il y à {N} livre(s)",
gender : "Dont {0} thrillers, {1} mangas",
author : "{0} auteur|{0} auteurs",
...
}
And to finish menu.json:
menu: {
home : "Accueil",
about : "A propos",
...
}
Use (methods)
Once installed, the plugin is available in all components. To use it, just call one of the following methods:
Retrieve the message of the current language
$lng(path, p1, p2)
--
path : the json path. ex : $lng(home.title)
#case of non-pluralization :
p1: the number or value to replace.
p2: useless.
ex : $lng(home.count, {"N":3}) ou $lng(home.gender, [3, 6]) = "With 3 thrillers, 6 mangas"
#with pluralization :
p1: index to use (the message is cut by a pipe |)
p2: the number or value to replace.
ex: $ lng ("home.author, 1, [6]) =" 6 authors "
Retrieve the messages of a language different from the current language
$ lngT (path, language, p1, p2)
-
path: the json path. ex: $ lng (home.title)
language : the language of translation
ex : $lng("menu.about") and $lngT("menu.about", "fr") = "About" and "A propos
#case of non-pluralization:
p1: the number or value to replace.
p2: useless.
ex : $lngT(home.count, "fr", {"N":3}) ou $lngT(home.gender, "fr", [3, 6]) = "Dont 3 thrillers, 6 mangas"
#case of pluralization:
p1: index to use (the message is cut by a pipe |)
p2: the number or value to replace.
ex : $lng("home.author, "fr", 1, [6]) = "6 auteurs"
Define current language
$lngSet(language);
--
language: desired language
ex : $lngSet("fr")
Retrieves the current language
$lngGet();
--
ex : $lngGet(), return "en"
Retrieves the list of configured languages
$lngGetAll();
--
ex : $lngGetAll(), return a string array ["en", "fr"]
Demo
Of course, an example is better than a thousand words. Go to the GIT page of the demo project to test.
Thank you
fr
Bienvenue sur la page de vue-lng
vue-lng est un plugin facilitant les projets multilangues en Vue.js.
Comment l'utiliser
Installation
Après avoir créé un projet Vue.js Il faut installer le paquet :
npm i vue-lng
Ensuite, dans le fichier mains.js à la racine du projet, il faut importer le plugins :
import lng from "vue-lng";
Le plugin est désormais présent dans le projet
Configuration
Pour ajouter le plugin à l'instance de vue :
Vue.use(lng, {
debug: false, // OPTIONNEL (defaut = true)
startOne: false, // OPTIONNEL (defaut = false)
language: "en", // OPTIONNEL (defaut = true)
fallback: "fr",
messages: {
en: require("./locales/en.json"),
fr: require("./locales/fr/")
}
});
- debug (optionnel) : affiche ou masque les informations d'erreur et d'avertissement (true par default). ex : process.env.NODE_ENV
- startOne (optionnel) : définit l'index de départ pour la pluralisation, false = 0 (defaut) ou true = 1.
- language (optionnel) : est la langue intiale à utiliser. "en" est un exemple.
- fallback : si le message n'est pas trouvé dans la langue de traduction, le message est recherché dans cette langue par defaut.
- messages : est un objet représentant les messages de traduction. Il peut etre :
- un json direct :
messages: {
en: {
title : "Welcome on my website",
cart : "Cart",
...
},
fr: {
title : "Bienvenue sur mon site",
cart : "Panier",
...
}
}
- un import de fichiers soit unique (en.json), soit multiples (fr) et dans ce cas, il est necessaire d'utiliser un fichier js d'import comme le montre l'exemple. Supposons la structure suivante :
mains.js
locales/
|_ en.json
|_ fr/
|_ home.json
|_ menu.json
|_ index.js
Nous pourrons configurer le plugin de cette manière :
messages: {
en: require("./locales/en.json"),
fr: require("./locales/fr/")
}
Pour le fichier en.json :
{
home : {
title : "Books page",
count : "There is {N} book(s)",
gender : "With {0} thrillers, {1} mangas",
author : "{0} author|{0} authors",
...
},
menu: {
home : "Home",
about : "A propos",
...
}
}
Pour fr/index.js (par exemple) :
export * from './home.json';
export * from './menu.json';
Pour home.json
home: {
title : "Page de livres",
count : "Il y à {N} livre(s)",
gender : "Dont {0} thrillers, {1} mangas",
author : "{0} auteur|{0} auteurs",
...
}
Et pour finir menu.json :
menu: {
home : "Accueil",
about : "A propos",
...
}
Utilisation (méthodes)
Une fois installé, le plugin est disponible dans tous les composants. Pour l'utiliser, il suffit d'appeller une des methodes suivantes :
Récupérer le message de la langue courante
$lng(path, p1, p2)
--
path : le chemin json. ex : $lng(home.title)
#cas de non pluralisation :
p1 : le numéro ou la valeur à remplacer.
p2 : inutile.
ex : $lng(home.count, {"N":3}) ou $lng(home.gender, [3, 6]) = "Dont 3 thrillers, 6 mangas"
#cas de pluralisation :
p1 : index à utiliser (le message est découpé par un pipe |)
p2 : le numéro ou la valeur à remplacer.
ex : $lng("home.author, 1, [6]) = "6 auteurs"
Récupérer les message d'une langue différente de la langue courante
$lngT(path, language, p1, p2)
--
path : le chemin json. ex : $lng(home.title)
language : la langue de traduction
ex : $lng("menu.about") et $lngT("menu.about", "en") = "A propos" et "About
#cas de non pluralisation :
p1 : le numéro ou la valeur à remplacer.
p2 : inutile.
ex : $lngT(home.count, "en", {"N":3}) ou $lngT(home.gender, "en", [3, 6]) = "With 3 thrillers, 6 mangas"
#cas de pluralisation :
p1 : index à utiliser (le message est découpé par un pipe |)
p2 : le numéro ou la valeur à remplacer.
ex : $lng("home.author, "en", 1, [6]) = "6 authors"
Définir la langue courante
$lngSet(language);
--
language : langue souhaitée
ex : $lngSet("en")
Récupère la langue courante
$lngGet();
--
ex : $lngGet(), retourne "fr"
Récupère la liste des langues paramétrés
$lngGetAll();
--
ex : $lngGetAll(), retourne un tableau de chaine de caractères ["en", "fr"]
Démonstration
Bien entendu, un exemple vaut mieux que mille mots. Rendez vous sur la page GIT du projet de démo pour tester.
Merci