Adding i18n support with Vue-i18n

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...