Now, let's see how to add support for i18n in a Vue application with Vue-i18n (https://kazupon.github.io/vue-i18n).

First of all, we will create a front-end/src/locale directory to put our localized message in. This folder looks as follows:

.
└── locale
    ├── index.js
    └── messages
        ├── en_US.json
        └── zh_CN.json

The following is what front-end/src/locale/index.js looks like:

import enUSMessages from './messages/en_US.json'
import zhCNMessages from './messages/zh_CN.json'

export const enUS = enUSMessages
export const zhCN = zhCNMessages

en_US.json and zh_CN.json are simply JSON files that contain a localized message. For example, the following is a snippet of en_US.json:

{
  "logo": {
    "tagLine": "Open source task management tool"
  },
  ...
  "error": {
    "request": {
      ... 
      "notAuthorized": "Request not authorized.",
      ...
    }
  }
}

Please note that we do not have to use JSON for localized messages. We can just use a JavaScript file. For example, we can change en_US.json to en_US.js with content like this:

export default {
  "logo": { ... },
  ...
  "error": { ... }
}

Now we have the localized messages ready, let's create an instance of VueI18n in front-end/src/i18n.js, which looks as follows:

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { enUS, zhCN } from './locale'

Vue.use(VueI18n)

// Create VueI18n instance with options
export const i18n = new VueI18n({
  locale: 'en_US',
  messages: {
    'en_US': enUS,
    'zh_CN': zhCN
  }
})

As you can see, we import the enUS and zhCN messages from the ./locale folder and then map them to the en_US locale and the zh_CN locale. In the VueI18n instance, we set the default locale to en_US by setting the locale property of the VueI18n options.

Now, let's make the following changes to front-end/src/main.js to bootstrap VueI18n:

...
import { i18n } from './i18n'
...
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

As you can see, we import the VueI18n instance, i18n, and add it to the root Vue instance.

To use localized messages in a Vue component, we can use the $t() instance method that VueI18n creates. For example, in front-end/src/components/Logo.vue, we can use {{ $t("logo.tagLine") }} to get the localized message:

<template>
  <div class="logo-wrapper">
    <img class="logo" src="/images/logo.png">
    <div class="tagline">{{ $t("logo.tagLine") }}</div>
  </div>
</template>

To use VueI18n in JavaScript files, we can import front-end/src/i18n.js and use the i18n.t() method. For example, the following is the change made to front-end/src/utils/error-parser.js:

import { i18n } from '@/i18n'

export default {
      ...
      } else if (status === 401) {
        return new Error(i18n.t('error.request.notAuthorized'))
      } 
      ...
  }
}

Once all of the labels have been localized, if you run the npm run test:unit command, you will see errors, complaining of _vm.$t is not a function or [vue-i18n] Cannot find VueI18n instance!, and so on. It is because we haven't added VueI18n to these tests. 

Let's do that now. In LoginPage.spec.js and RegisterPage.spec.js, we add the VueI18n instance, i18n, into wrapper as follows:

...
import { i18n } from '@/i18n'
...
describe('LoginPage.vue', () => {
  ...
  beforeEach(() => {
    wrapper = mount(LoginPage, {
      localVue,
      router,
      i18n
    })
    ...
  })
  ...
})

You can find details about adding i18n support in the commit history: