> For the complete documentation index, see [llms.txt](https://pmsgz.gitbook.io/nectar/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://pmsgz.gitbook.io/nectar/basics/internationalization.md).
# Internationalization
## Overview
Nectar is multi-lingual. It supports Internationalization (i18n) and Right-to-Left languages such as Arabic, Hebrew etc.
It uses [i18next](https://www.i18next.com) library for implementing i18n.
The translation files in JSON format are present inside `/assets/custom/i18n/` folder.
By default, Internationalization (i18n) is enabled in Nectar.
## Configuration Variables
The configuration variables for i18n are present in `/assets/custom/js/config.js` file, inside `window.config.i18n` object.
```javascript
window.config.i18n = {
enabled: true, // If your app uses multiple languages, then set to true.
languages: { // List of languages your app supports, this is used to load translations and populate language selector widgets.
en: {
name: 'English',
slug: 'english',
code: 'en',
locale: 'en-UK',
dir: 'ltr',
flag: 'https://flagcdn.com/gb.svg'
},
hi: {
name: 'Hindi',
slug: 'hindi',
code: 'hi',
locale: 'hi-IN',
dir: 'ltr',
flag: 'https://flagcdn.com/in.svg'
},
ar: {
name: 'Arabic',
slug: 'arabic',
code: 'ar',
locale: 'ar-AE',
dir: 'rtl',
flag: 'https://flagcdn.com/ae.svg'
}
},
defaultLanguage: 'en', // This is the default or primary language of your app.
fallbackLanguage: 'en', // In case, if translations are not present in JSON files, then the string is translated into fallback language.
namespaces: ['common'] // These are the i18n JSON translation files without the suffix .json
}
```
## Set Primary Language
By default, the primary language for Nectar is set to `English (en)`
To change the primary language from English to any other language (suppose French), follow these steps:
1. Open `index.html` and set ``
2. In case, your primary language is RTL (suppose Arabic), then set `` Additionally, change: `` to ``
3. Now, open `/assets/custom/js/config.js` file.
4. Inside `window.config.i18n = {` change `defaultLanguage` from `en` to `fr`
5. Go to `/assets/custom/i18n/` and create a new folder `fr`
6. Inside `/assets/custom/i18n/fr/`, create a file `common.json` and add translation strings.
This way, you can set your Primary Language.
## Language Switcher
When your app is multi-lingual, you might want to provide a way for your users to switch languages. We have implemented one, and it is located at `/partials/select-language.html`
The list of available languages is populated from `window.config.i18n.languages`
## i18n Related Methods
The code which manages i18n in Nectar is present in `/assets/custom/js/init.js` inside `app.i18n = {` object.
### `app.i18n.initialize();`
This code initializes the i18n library.
### `app.i18n.currentLanguage();`
Using this, you can get the current language of the app.
### `app.i18n.changeLanguage(languageCode);`
Using this, you can change the current language of the app. For example, `app.i18n.changeLanguage('hi');`
### `app.i18n.localize();`
This code looks for all the data-i18n attributes in HTML elements and translate them. This is useful when you dynamically add elements in DOM.
### `app.i18n.translate(key, fallback, options);`
This is used to translate string present in JSON translation files. For example, `app.i18n.translate('app-title', 'Nectar', //i18next options);`
If the current language is Hindi, then this will output `'`नेक्टर`'`. If `app-title` key is not present, then the translation will fallback to `'Nectar'`.
## `languageChanged` Event
Whenever the current language of the app is changed, `languageChanged` event is emitted by the app, which you can listen to and perform required actions. For example,
```javascript
app.on('languageChanged', function(language) {
});
```
{% hint style="info" %}
Read the official documentation of i18next for advanced usage here [https://www.i18next.com](https://www.i18next.com/)
{% endhint %}