Skip to content
This repository has been archived by the owner on Jun 11, 2024. It is now read-only.
/ lieu Public archive

JavaScript plugin for adding multilingual website. i18n.

License

Notifications You must be signed in to change notification settings

softsport/lieu

Repository files navigation

Lieu

npm bundle size npm GitHub GitHub issues

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!