Manage Vue i18n with Typescript
By: Adrien Miquel
Tags: JavaScript, Web Development, Typescript, Vuejs, Programming

VUE with TYPESCRIPT

Manage Vue i18n with Typescript

Internationalize your Vue project thanks to vue-i18n along with Typescript

Your Vue project is running well for now. Greeeeat! 💥💥💥

All text is in English and it’s a good bet since you target all English speakers (a large part of the population). But it could be interesting to manage several languages to make your app world wide 🌐 and closer to your users 👩‍💻.

Photo by Aaron Burden on Unsplash

In this article, you will learn how to manipulate Vue i18n with Typescript. It’s a very handy and easy-to-use library to manage a multi-language app.

⚙ ️Setting things up

Installing vue-i18n starts with an npm command of course:

npm install vue-i18n yarn add vue-i18n #OR with yarn vue add i18n #OR with Vue CLI 3.x

Then in your main.ts file, you just need to add the following lines:

import Vue from 'vue'

import VueI18n from 'vue-i18n'



Vue.use(VueI18n)

For further details 🔍 about installation, I recommend you to read the doc:

Adding Typescript support

First, let’s create a file defining some typings in a dedicated folder named i18n :

Then JSON files have to be created to map the translations in an object:

Don’t forget to add the configuration key resolveJsonModule: true in your tsconfig.json so that the json files can be imported.

In order to link the translation files with the Locales model we created earlier, we add a setup file index.ts:

Finally, all this configuration has to be included to our Vue project. In the main.ts file, add:

Now, we are good to go! ☄️ Let’s use the translations in our project.

🈯 Using translations

In template 📐

It’s super easy to get the translations we defined in the locale files. vue-i18n provides a $t method to which you give a dot-separated path to the locale key you are seeking for.

In the script’s component 📦

Get Directly a TranslateResult

We can get a translation from the script using the same $t method accessible from the Vue instance. It returns a TranslateResult object.

Here in L4, I use the v-html attribute because the locale key headline contains HTML content. In a nominal case, it would have been : <p>{{ $t('headline') }}</p>

Map set of TranslateResult into a Typescript object

You can create a Typescript model which will be used to map a set of translations. In L28, by using a simple cast — as unknown as Link[] — we map a set of translations to a single object. Handy! 💪

In model file ( .ts ) 🖼️

Using vue-i18n in a Typescript model file requires a single line of setup in main.ts. At the end of the file, you just need to add an export statement:

export { i18n };

Or you can add the export keyword in front of the i18n variable declaration: export const i18n = new VueI18n({ … })

Thus, we can use it everywhere we want… and that’s cool since we want to use it in our model.ts:

Using a function is mandatory so that i18n to be defined.

🤝 Putting it all together

Now we can add a select to update the current language.

This renders:

Switching current language

You may have noticed the headline and the link captions are not updated. This is due to the fact that the translations are not reactive and won’t update themselves on the variables they are used. ⛔

To solve this problem, we can use the Vuex store to detect language changes and react to them:

Problem solved ✅:

Everything works great now!

🛤️ Going further…

Vue i18n offers a lot of cool features such as pluralization, parametrized keys, currency management, datetime management, and more… That’s why I recommend you to go further into their complete guide.

Finally, you can find the source code here: