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