How to Add Internationalization to a Vue App
Tags: vue, javascript, tutorial, beginners
Published: 2019-07-20 21:26:03

---
title: How to Add Internationalization to a Vue App
published: true
description: How to Add Internationalization to a Vue App
canonical_url: https://www.jenniferbland.com/adding-internationalization-to-a-vue-application/
cover_image: https://res.cloudinary.com/ratracegrad/image/upload/v1563809503/InternationalizationVueApp_z1h4xo.png
tags: #vue, #javascript, #tutorial, #beginners
---

¡Hola. Bonjour. Ciao. 你好. Here is how you add internationalization to Vue.

My company has plants in 37 countries. We write applications for the employees at these plants. Our application has to be translated into their native language. You can easily add internationalization to your Vue application. Let me show you how to add internationalization to the default Vue application.

Creating Our Application
------------------------

We will be creating an application using the Vue CLI. If you do not have it installed you can install it with this command:

```npm install @vue/cli -g```

The `-g` flag will install the Vue CLI globally. Now that we have the CLI installed we can create a new application. Enter this command to create the application:

```vue create vue-internationalization```

The Vue CLI will prompt you to pick a preset. You have the option of selecting the default preset or manually selecting features. I chose `default`.

![Vue CLI options](https://i0.wp.com/www.jenniferbland.com/wp-content/uploads/cli.png?resize=880%2C204)



This will scaffold out a vue application in a folder called `vue-internationalization` since this is the name we gave at creation. Now change into that directory with this command:

```cd vue-internationalization```

Once you are in the directory you will need to install all dependencies with this command:

```npm install```

To verify everything is running correctly enter this command:

```npm run serve```

Now open your browser to localhost:8080 and you should see the following:

![Default vue application](https://i0.wp.com/www.jenniferbland.com/wp-content/uploads/default.png?resize=868%2C903)



Next, we will provide international translation for this application.

Vue-i18n Plugin
---------------

We will use the vue-i18n plugin for internationalization. Let’s add this plugin to our application. If you still have your server running, stop it. Then at the terminal enter this command:

```npm install vue-i18n --save```

Since this is a plugin, I am going to configure it as a plugin. Create a folder called `plugins` in your src folder. Create a file called `i18n.js` inside the plugins folder.

To provide internationalization you have to tell Vue to use the vue-i18n plugin and provide it a messages object. The messages object will have the translations for every language your application supports.

The first step is to tell vue to use the plugin. In the i18n.js file enter the following:

```javascript
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);
```

Now vue knows to use our internationalization plugin. Next step is to create the translations for every language we support. For demonstration purposes, I am going to add just two languages- English and Spanish. Once you understand how this works it is very easy to keep adding more and more languages to your application.

To add languages we have to create a message object. Objects in JavaScript are made up of key-value pairs. The keys for the messages object will be the languages that we support. Let’s create this using English and Spanish for our supported languages. Add the following code below the `Vue.use` line in the `i18n.js` file.

```javascript
const messages = {
    'en': {},
    'es': {}
};
```

Next, we have to create a new internationalization object and tell vue to use it. After the messages object add the following code:

```javascript
const i18n = new VueI18n({
    locale: 'en', // set locale
    fallbackLocale: 'es', // set fallback locale
    messages, // set locale messages
});
```

When we create our internationalization object we have to tell it the default locale that we will show initially. In case there is a problem showing this language we can set a fallback locale. Then we tell it the messages object that has our translations. The last line exports this object.

Vue needs to be told to use the internationalization. We do this in the `main.js` file. Open up the `main.js` file. Import our internationalization file with this command:

```import i18n from '@/plugins/i18n';```

> Note: if you are not familiar with using the @ in the import line, by default Vue knows this points to the src directory. This allows you to avoid trying to do relative paths to the plugins directory.

We have to tell Vue to use it so we add `i18n` to the Vue object. Here is what your `main.js` file should look like:

```javascript
import Vue from 'vue';
import App from './App.vue';
import i18n from '@/plugins/i18n';

Vue.config.productionTip = false;

new Vue({
    i18n,
    render: h => h(App),
}).$mount('#app');
```

Adding International Translations
---------------------------------

Open up the `i18n.js` file. We are going to create our first translation. We will start with the phrase “Welcome to Your Vue.js App.” The translation for each language in the message object is an object. Just a reminder that an object is a key-value pair. The key is what we will use and value is the translation of the phrase in that language. So let me show you how this work with English. Update the file to include the following:

```javascript
const messages = {
    'en': {
        welcomeMsg: 'Welcome to Your Vue.js App'
    },
    'es': {}
};
```

Now we have to provide a Spanish translation for this phrase. Since I do not speak Spanish fluently, I am going to use Google Translate.

![Google Translate](https://i1.wp.com/www.jenniferbland.com/wp-content/uploads/translate.png?resize=880%2C232)



I will copy the Spanish translation that Google Translate provides. Then I will add it to the Spanish section. Every language must use the same key. So our updated message object looks like this now:

```javascript
const messages = {
    'en': {
        welcomeMsg: 'Welcome to Your Vue.js App'
    },
    'es': {
        welcomeMsg: 'Bienvenido a tu aplicación Vue.js'
    }
};
```

Now that we have this translation we need to replace the English text in our default application to use our internationalization text. Open up the `App.vue` file. In the template, it is passing a prop called `msg` to the HelloWorld component. We want to replace this text with our international text. For simplicity, I am going to remove this prop and place the text in the HelloWorld component.

Open the `HelloWorld` component. In the `h1` tag, the prop msg is being displayed. Let’s replace it with the following code:

```html
<h1>{{ $t('welcomeMsg') }}</h1>
```

The $t specifies we are using the internationalization plugin. The text we want to be displayed is the value of the welcomeMsg key in our message object. If you have your server stopped, you can start it with this command:

```npm run serve```

Then go to your browser and you will see the international text displayed.

Changing Languages
------------------

We want to be able to see the text change to Spanish if we set our local to be Spanish. The question is how do we do this? The simplest way is to provide a drop-down that shows the flags of the countries whose language support is provided in the application. Users can select their language which results in all text being rendered in that language. So we need a way to allow users to change languages.

To display the flags in a drop-down we could use a `.png` graphics file. That will clearly work. Let me show you a better way. The `vue-flag-icon` package provides a collection of all country flags in SVG. Let’s install it with this command:

```npm install vue-flag-icon --save```

Now that we have it installed we have to tell Vue to use it. Open up the main.js file. We have to import the package we just installed and tell vue to use it. You main.js file should look like this now:

```javascript
import Vue from 'vue';
import App from './App.vue';
import i18n from '@/plugins/i18n';
import FlagIcon from 'vue-flag-icon';

Vue.use(FlagIcon);
Vue.config.productionTip = false;

new Vue({
    i18n,
    render: h => h(App),
}).$mount('#app');
```

Next, we need to create buttons for the user to select their language. Open up the `App.vue` component. We are going to show a button for both languages. The user can click on the button to show the text in their language. In this demo, I am only supporting two languages. In a real-world app, you will probably be supporting many more languages. In that case, you would have an array of all the supported languages. Let’s do this now in our application so you can see how easy it is to transfer over to a bigger application.

We need to add data to our script. We will have an entry called `languages` which will be an array of objects. The object will contain a flag, language, and a title. This is what the data should look like:

```html
data() {
    <em class="markup--em markup--pre-em">return </em>{
        languages: [
            { flag: 'us', language: 'en', title: 'English' },
            { flag: 'es', language: 'es', title: 'Español' }
        ]
    };
}
```

In our template, we need to create a button for each language in our `languages` array. We will use a `v-for` directive to loop over all the entries and create a button for each one. Here is the code you should add to the template before the `img`.

```html
<div>
    <button v-for="entry in languages" :key="entry.title" @click="changeLocale(entry.language)">
        <flag :iso="entry.flag" v-bind:squared=false /> {{entry.title}}
    </button>
</div>
```

In the code above we loop through all entries in the `languages` array. Inside the button, we display the countries flag and the title. When you run this initially we get the default styling for a button provided by your browser. Let’s style the button so add the following CSS in the style section:

```css
button {
    padding: 15px;
    border: 1px solid green;
    font-size: 18px;
    margin: 15px;
}
```

I am providing padding around the text and putting a green border around the button. The font-size makes the text readable on the screen. The margin is there just to set space between the two buttons as well as some space between the buttons and the image.

When we created the button we told it to call a method `changeLocale` if a user clicks the button. This method will change the locale to the language on the button the user clicks. To change the locale we will first need to import our i18n plugin. You can import it with this command:

```import i18n from '@/plugins/i18n';```

Now we can create our `changeLocale` method. Here is what it looks like:

```javascript
methods: {
    changeLocale(locale) {
        i18n.locale = locale;
    }
}
```

Start your server. You will see the two buttons. Click the Spanish button. The welcome message should instantly change to Spanish.

![Text changed to Spanish](https://i1.wp.com/www.jenniferbland.com/wp-content/uploads/textChanged.png?resize=830%2C862)



Finishing The Translations
--------------------------

So far we have only translated one item on the screen. We can repeat what we have done for the remaining text on the page. Open up the `i18n.js` file. Here are my translations for the section headings on the page.

```javascript
const messages = {
    'en': {
        welcomeMsg: 'Welcome to Your Vue.js App',
        guide: 'For a guide and recipes on how to configure / customize this project,',
        checkout: 'check out the',
        plugins: 'Installed CLI Plugins',
        links: 'Essential Links',
        ecosystem: 'Ecosystem'
    },
    'es': {
        welcomeMsg: 'Bienvenido a tu aplicación Vue.js',
        guide: 'Para una guía y recetas sobre cómo configurar / personalizar este proyecto,',
        checkout: 'revisar la',
        plugins: 'Plugins de CLI instalados',
        links: 'Enlaces esenciales',
        ecosystem: 'Ecosistema'
    }
};
```

Now we need to update the HelloWorld component with these translations. Here is the translated template:

```html
<template>
    <div class="hello">
        <h1>{{ $t('welcomeMsg') }}</h1>
        <p>
            {{ $t('guide') }}<br>
            {{ $t('checkout') }}
            <a href="https://cli.vuejs.org" target="\_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>{{ $t('plugins') }}</h3>
        <ul>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="\_blank"
                   rel="noopener">babel</a></li>
            <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="\_blank"
                   rel="noopener">eslint</a></li>
        </ul>
        <h3>{{ $t('links') }}</h3>
        <ul>
            <li><a href="https://vuejs.org" target="\_blank" rel="noopener">Core Docs</a></li>
            <li><a href="https://forum.vuejs.org" target="\_blank" rel="noopener">Forum</a></li>
            <li><a href="https://chat.vuejs.org" target="\_blank" rel="noopener">Community Chat</a></li>
            <li><a href="https://twitter.com/vuejs" target="\_blank" rel="noopener">Twitter</a></li>
            <li><a href="https://news.vuejs.org" target="\_blank" rel="noopener">News</a></li>
        </ul>
        <h3>{{ $t('ecosystem') }}</h3>
        <ul>
            <li><a href="https://router.vuejs.org" target="\_blank" rel="noopener">vue-router</a></li>
            <li><a href="https://vuex.vuejs.org" target="\_blank" rel="noopener">vuex</a></li>
            <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="\_blank"
                   rel="noopener">vue-devtools</a></li>
            <li><a href="https://vue-loader.vuejs.org" target="\_blank" rel="noopener">vue-loader</a></li>
            <li><a href="https://github.com/vuejs/awesome-vue" target="\_blank" rel="noopener">awesome-vue</a></li>
        </ul>
    </div>
</template>
```

Start your server and view your application in the browser. Click between the two buttons. You will see the text automatically translate to the language you clicked. Watch this gif.

![Switching languages in Vue](http://www.jenniferbland.com/wp-content/uploads/internationalization.gif)



Get the Code
------------

I have the finished code [available on GitHub](https://github.com/ratracegrad/vue-internationalization). Please help me out and **star the repo** when you get the code.

Conclusion
----------

If your app is used by customers all over the world, you will need to add internationalization. To add support for multiple languages you have to install the `vue-i18n` plugin. Then translate the text in your application for all the languages you support. The last step is to provide a way for users to toggle between different languages.

Training Courses
-----------------
I create training courses on my website CodePrep. I have training courses on Vue, Webpack, Flexbox, functional programming and more. [Check it out here.](https://codeprep.io/ "CodePrep")