Lieu
JavaScript plugin for adding multilingual website.
Installation
npm install lieu or download lieu.js from /dist.
ES6
import Lieu from 'lieu';
const lieu = new Lieu({/* ... */});
CommonJS
const Lieu = require('lieu');
const lieu = new Lieu({/* ... */});
UMD (+ jsDelivr)
<script src="https://cdn.jsdelivr.net/npm/lieu"></script>
Usage
Initialization
import Lieu from 'lieu';
const lieu = new Lieu({
isDebug: true, // default "false"
initialLanguage: 'en', // default automatically or the first language in the list
attributeName: 'data-lieu', // default "data-lieu"
languages: {
en: {
name: 'English',
locales: {
'Hello': 'Hello!',
'Bye': 'Bye!',
'HelloName': 'Hello %{name} %{surname}!',
// [] and {} brackets are acceptable
'Apples': '{1}There is one apple|[2,5]There are some %{name}|{5,*}There are many %{name}',
},
},
tr: {
name: 'Türk',
locales: {
'Hello': 'Merhaba!',
'Bye': 'Hoşçakal!',
'HelloName': 'Merhaba %{name} %{surname}!',
},
},
// ...{pt: {...}, zh: {...}, /* ... */}
},
// or
// languages: require('languages.json'),
// Hooks
onSetLang(newLang, oldLang){ /* your code */ } , //
onGetLang(){ /* your code */ } , //
});
Usage in JavaScript
import Lieu from 'lieu';
const lieu = new Lieu({/* ... */});
// translate strings
lieu.trans('Hello'); // "Merhaba!" (if Turkish is selected)
// other methods
lieu.setLang('tr'); // set new language
lieu.getLang('tr'); // get language
lieu.getLangs(); // get all languages
Replacing Parameters In Translation Strings
lieu.trans('HelloName', { name: 'John', surname: 'Doe' }); // "Hello John Doe!" (if English is selected)
Pluralization
lieu.trans('Apples', 1); // "There is one apple" (if English is selected)
lieu.trans('Apples', 3, { name: 'apples' }); // "There are some apples"
lieu.trans('Apples', { name: 'apples' }, 30); // "There are many apples"
Usage in HTML
<span data-lieu="Hello"></span>
<span data-lieu="Bye"></span>
<script src="https://cdn.jsdelivr.net/npm/lieu"></script>
<script>
const lieu = new Lieu({ /* ... */ });
</script>
Options
| option | type | required | description |
|---|---|---|---|
| languages | object / json | true | List of languages and string translations |
| initialLanguage | string | false | Selected default language. If not specified, it will be determined automatically. If you do not have any language, then the first one in the list of languages will be selected |
| isDebug | boolean | false | If true, warns in the console about errors and not found translations in languages |
| attributeName | string | false | String localization attribute for HTML usage |
Hooks
| hook | arguments | description |
|---|---|---|
| onSetLang | (newLang, oldLang) | executed when using the setLang() method |
| onGetLang | () | executed when using the getLang() method |
Contributing
The author will be grateful to all developers for any suggestions to improve the plugin. Fork and submit pull requests. Thank you!
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
8 Dec 22, 2022
5 May 28, 2022
6 Dec 20, 2022
3 May 8, 2022
5 Aug 30, 2022
208 Jan 8, 2023
91 Jan 2, 2023
7 Jan 15, 2022
7 May 10, 2022
7 Apr 8, 2022
7 Jul 17, 2022
68 Dec 9, 2022
5 Feb 7, 2022
55 Dec 30, 2022
2 Feb 3, 2022
7 May 5, 2022