Internationalization

Nectar is multi-lingual. It supports Internationalization (i18n) and Right-to-Left languages such as Arabic, Hebrew etc.
It uses i18next library for implementing i18n.
By default, Nectar is configured for internationalization. The primary language is set to English en
The translation files in JSON format are present inside /assets/custom/i18n folder.
To change the primary language from English to other language (suppose French), follow these steps:
1.Open /assets/custom/js/config.js file.
2.Inside window.config.i18n = { change lang: 'en' to lang: 'fr' and keep dir: 'ltr' as it is.
3.Go to /assets/custom/i18n/ and create a new json file with the name fr.json and write the translations.
4.Now open /assets/custom/js/init.js file.
5.Go to initializeI18n(); function.
6.Inside this function change whitelist: ['en', 'hi', 'ar'] to the languages your app supports, for example, whitelist: ['fr', 'en']. Similarly change preload: ['en', 'hi', 'ar'] to whitelist: ['fr', 'en']
7.Open index.html file change <html lang="en" dir="ltr"> to <html lang="fr" dir="ltr">
In case your primary language is RTL such as Arabic, you will need to make an additional change in index.html file.
Inside index.html file, change <link class="f7" rel="stylesheet" href="assets/vendor/framework7/css/framework7.min.css" /> to <link class="f7" rel="stylesheet" href="assets/vendor/framework7/css/framework7.rtl.min.css" />
If your app has both LTR and RTL languages, then the app would restart when the user switches from LTR to RTL or vice versa. This is because Framework7 requires to reinitialize for making the changes effective. This is not the case for LTR to LTR or RTL to RTL switching.
Read the official documentation of i18next for advanced usage here https://www.i18next.com​

The Basics - Previous

Theming

Next - UI/UX

Components

Last modified 3yr ago

Copy link