Making Your Vue App International with i18n

In our international world, it is very rare that you can find an app that would have just one language available and that you cannot switch. In this article, we will take a closer look at the i18n plugin for VueJs.

If you are new to Front-end development and looking for new skills that you can test on your project, this article is for you.

It will be a short briefing about how you can use i18n where we will speak about it in general and take a look at some particular cases.

Installation

First of all, of course, it is important to install the dependency on our project.

The easiest way would be to follow the tutorial that is available on the official documentation of i18n.

How to Use it?

When our dependency is installed, configured, and ready to be used on our project, the most important thing would be the correct organization of the files and their structure.

Let’s say that we have a Landing page and we would like to have all the text changed depending on the language we choose.

First of all, let’s create a “JSON” file and name it “landing.json”. Each language should have its own folder.