i18n: Internationalization in Vue Applications

In this globalized era we live in, the need to make applications for people in different parts of the world is more and more common. This need comes with challenges like supporting multiple locales and integrating them into your application, but luckily for us, this is where internationalization comes in.

What are Internationalization and Localization?

Let’s start from the beginning, with some concepts that we need to understand. The first one is Internationalization, this word refers to the process of planning and implementing the app to meet the needs of different locales around the world. Internationalization is also know as i18n which means “I — eighteen letters — N”.

Then we have Localization (L10n), which is the process of building versions of your application-specific to a target market or region, including translation of the interface, formatting data for particular locales, and more.

Benefits of Internationalization

Without the process of internationalization the application can become not only hard to develop and time-consuming, but almost impossible to maintain at a large scale. Let’s imagine we have to create an app for people in Spain and France, without internationalization we might end up with two different apps, one for each market, maybe not a big deal if there are only two markets, but what if we need to scale up to nine or ten markets? It’ll be a maintenance hell.

So to sum it up here are the benefits of implementing internationalization on your application:

• You will have a single source of truth no matter the locale of your app.
• It will be easily scalable to other markets.
• The application will be easier to maintain
• It reduces the time, the cost and the effort required to implement the localization.

Vue i18n Installation

Vue i18n is an internationalization plugin of Vue.js. It is a very complete plugin that allows adding more than just translations to the application. The installation process is very straightforward, and you’ll have two different ways to do it: