Internationalization (i18n)

How to use Vue 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.

Lets see how to integrate internationalization (i18n) with MDB 5 across our layout, components, and utilities.

Prerequisites

Before starting the project make sure to install the following utilities:

• Node LTS (14.x.x recommended)
• Code editor. We recommend VSCode

Creating a new project

First, we need to create a new Vite project.

Step 1

Init the project and choose vue framework. You can add a name for your project as we did in example below

Step 2

Navigate to app's directory.

Step 3

Install dependencies.

Step 4

Setup MDB.

Step 5

Import CSS. Add the following line at the beginning of your main.ts file:

Step 6

Import Font Awesome and Roboto font. Add the following lines in public/index.html file inside head section:

Step 7

Enable sourcemaps during development.

Step 8

Launch the application.

Installation

Once we have managed to launch our project, we have to add vite plugin vue i18n package.

Step 1

Navigate to your project and in your terminal run:

And

Step 2

Create locales folder inside your src and create new json files with translations

Step 3

Add vueI18n property to your vite config file. It should look like in example below.

Step 4

Let's not forget to add our json files with translations to main.ts file

Adding new content

After we go through all the previous steps, we can start developing our application. Let's change the content of HelloWorld.vue so that we can check if the app is working properly

Before that, lets clear App.vue file. You can also clear style.css file to make it look like in our demo.

And now you can try some example we have prepared for you. Just copy the code below.