Internationalization (i18n)
How to use Bootstrap 5 with i18n - free starter
This article will teach you how to integrate i18n with your project. You can start using directional classes with the latest Bootstrap 5.
Let's see how to integrate internationalization (i18n) with MDB 5 layout, components, and utilities.
If you need more extensive support and step-by-step guidance, check out our dedicated tutorial.
Prerequisites
Before starting the project make sure to install the following utilities:
You also need a module bundler. To speed up the project preparation process, check out Webpack, Vite, or Parcel integration guide.
Installation
This guide is based on Vite Starter.
The starter is fully configured and ready to use.
Just download it and install the dependencies using npm install command.
Note: Vite starter uses MDB Free. If you want to use the MDB Pro, you need to install it.
Once we have managed to launch our project, we have to add two dependencies:
- i18next, a very popular internationalization framework.
- i18next-fetch-backend plugin to load resources using the fetch API.
Note: If you are using another MDB starters, the file and folder paths will look similar. If you are adding i18n to your existing project or creating a new project from scratch, keep in mind that paths in your case may look different.
Important: In this guide, we use MDB Pro to show you how to translate a Pro component using the component's option. If you don't have access to MDB Pro or want to use MDB Free, you'll need to remove some code. To make it easier for you, we add a comment with the information that this code fragment should be removed if you use MDB Free.
Configuration
At the beginning, we need to create an additional folder and a few files in which we will place translations and configuration for i18n.
Step 1
Create a locales folder inside your src,
json files for translations,
and i18n.js for internationalization plugin configuration.
Step 2
Copy the contents of the following snippets to the appropriate files created in the previous step.
Note: Remove popconfirm translations if you are using MDB Free.
Step 3
Now import i18next in the `i18n.js` file, create the configuration and add the code that will handle the page translation.
Step 4
Import the Translator class in src/main.js file and initialize Translator.
Example content
After we go through all the previous steps, we can start developing our application. Let's update the content of index.html so that we can check if the app is working properly.
You can try out the example we have prepared for you. Just add the code below inside the body tag.
More about i18n
For more information, see the i18next GitHub page. There you can read about other options, bundle optimizations, etc.
Frontend features
MDB UI KIT:
To create the project we used MDB UI KIT, with which we can build basic views very quickly.
Views and Layouts:
In this project:
- We successfully integrated i18next into the MDB package and can use the appropriate translations.
- We also added the i18next-fetch-backend plugin to load translations on demand and optimize translations.
- We created the
i18n.jsfile in which we placed the Translator code. - We created a JS Translator class with a basic configuration that will allow us to easily change the most important options when we initialize translations.