JavaScript plugin for adding multilingual website.
npm install lieu
or download lieu.js from /dist.
import Lieu from 'lieu';
const lieu = new Lieu({/* ... */});
const Lieu = require('lieu');
const lieu = new Lieu({/* ... */});
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
const lieu_ctx = new lieu({/* ... */});
</script>
import { createApp } from 'vue';
import App from 'App.vue';
import lieu from 'lieu/vue';
createApp(App)
.use(lieu, {/* ... */})
.mount('#app');
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 */ } , //
});
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
lieu.trans('HelloName', { name: 'John', surname: 'Doe' }); // "Hello John Doe!" (if English is selected)
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"
<span data-lieu="Hello"></span>
<span data-lieu="Bye"></span>
<h1 data-lieu="HelloName" data-lieu-name="John" data-lieu-surname="Doe"></h1>
<!-- After Initialization becomes (if English is selected): -->
<h1 data-lieu="HelloName" data-lieu-name="John" data-lieu-surname="Doe">
Hello John, Doe!
</h1>
<span data-lieu="Apples" data-lieu-name="apples" data-lieu-plural="4"></span>
<!-- After Initialization becomes: -->
<span data-lieu="Apples" data-lieu-name="apples" data-lieu-plural="4">
There are some apples
</span>
<!-- NOTE: Data attribute for pluralization always should be "plural"! -->
<script src="https://cdn.jsdelivr.net/npm/lieu"></script>
<script>
const lieu = new Lieu({ /* ... */ });
</script>
<script setup>
import { inject } from 'vue';
// Get Lieu instance
const lieu = inject('lieu');
</script>
<template>
<div>
<button @click="$lieu.setLang('ru')">
RU
</button>
<button @click="lieu.setLang('en')">
EN
</button>
<span v-lieu="'Hello'" />
<span v-lieu="'Hello', {name: 'John'}" />
</div>
</template>
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 |
hook | arguments | description |
---|---|---|
onSetLang | (newLang, oldLang) | executed when using the setLang() method |
onGetLang | () | executed when using the getLang() method |
The author will be grateful to all developers for any suggestions to improve the plugin. Fork and submit pull requests. Thank you!