✌️ The Ultimate Guide To Vue-i18n on Vue 2.7.7

Vue-i18-n Setup On Vue 2.7.7

Internationalization of an application is a standard requirement for every framework. However, Vue does not come with an internal solution for this. The most popular alternative I have found is Vue-i18n package.

However, installing it on Vue 2.7.7 with Composition API is not trivial. And Vue-i18n documentation is not making it easier.

Here you can find the documentation for vue-i18n v8, and here for v9. First question you may have if you should install v8 or v9. It is not documented. So quick answer for you: v8:

npm install vue-i18n@8

Actually you have to install composable package as well:

npm install vue-i18n-composable

Your package.json should have this inside after that:

"dependencies": {
    ...
    "vue-i18n": "^8.27.2",
    "vue-i18n-composable": "^2.0.0",
    ...
  },

Now, we will create files for translations. Inside “src” folder create a “locales” folder, and put three files:

index.ts
en.json
de.json

Here is the content of “en.json”:

{
  "title": "Good"
}