Localize Your Website Using The Lieu i18n Library

Preview:

Description:

Internationalization can be a challenge for multilingual websites. Translating strings on your website is a necessary step when you want to offer service to more than one nation. The ability to localize the content of your website and translate the text can assist in achieving this goal.

Here is a tiny i18n JavaScript library that helps you translate strings on your website using simple JavaScript API. This small but powerful utility can save you a lot of time (and money) when creating multiple versions of your site.

How to use it:

1. Install and import the Lieu library.

# NPM
$ npm i lieu

// ES6+
import Lieu from 'lieu';
// CommonJS
const Lieu = require('lieu');
// Browser
<script src="dist/lieu.umd.min.js"></script>
// OR from CDN
<script src="https://cdn.jsdelivr.net/npm/lieu"></script>

2. Prepare different language versions for your texts.

const myLanguages = {
      en: {
        name: 'English',
        locales: {
          'Hello': 'Hello World!',
          // also supports parameters and pluralization
          'HelloName': 'Hello %{name} %{surname}!',
          'Apples': '{1}There is one apple|[2,5]There are some %{name}|{5,*}There are many %{name}',
        },
      },
      es: {
        name: 'Spanish',
        locales: {
          'Hello': 'Hola Mundo',
          'HelloName': 'Hola %{name} %{surname}!',
        },
      },
      // more languages here
},

3. Define the text to be translated in the data-lieu attribute:

<h2 data-lieu="Hello"></h2>

4. Initialize the Lieu library.

const instance = new lieu({
      languages: myLanguages,
      // OR
      // languages: require('languages.json'),
});

5. Switch between languages:

instance.setLang('es');
lieu.setLang('en');
// ...

6. Available options.

const instance = new lieu({
      // enable debug mode
      isDebug: true,
      // initial language
      initialLanguage: 'en',
      // default data attribute
      attributeName: 'data-lieu',
      
});

7. Translate strings manually.

instance.trans('HelloName', { 
  name: 'CSS', 
  surname: 'Script' 
}); 
// "Hello CSS Script!"
instance.trans('Apples', 1); 
// "There is one apple"
instance.trans('Apples', 3, { 
  name: 'apples' 
});
// "There are some apples"
instance.trans('Apples', { 
  name: 'apples' 
}, 30); 
// "There are many apples"

8. Get languages.

instance.getLang('es');
instance.getLangs();

9. Event handlers.

const instance = new lieu({
      onSetLang(newLang, oldLang){ 
        // do something
      } ,
      
      onGetLang(){
        // do something
      },
      
});

Changelog:

v1.4.0 (11/01/2022)

• added support for Vue 3