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/[email protected]"></script>

<script>
const lieu_ctx = new lieu({/* ... */});
</script>

Vue 3

import { createApp } from 'vue';
import App from 'App.vue';
import lieu from 'lieu/vue';

createApp(App)
    .use(lieu, {/* ... */})
    .mount('#app');

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>

Replacing Parameters In Translation Strings

<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>

Pluralization

<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>

Usage in Vue 3

<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>

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!