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.

Vue I18n

⚙ ️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:

Installation | Vue I18n

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: