CODEWITHSUNDEEP
javascriptvue.js
Simon Hyll
Simon Hyll

Reputation: 3608

Internationalization in Vue.js

What are the best practices for internationalization in Vue?

Currently I'm thinking of having a 'strings' object that contains all strings, then a bit of ajax magic to update that strings object based on a json file with translated strings to certain languages.

Anyone got any better ideas? I'm currently having a bit of trouble using my strings approach since the strings object has to be loaded before anything else.

Is there a placeholder functionality for strings in Vue? For example, I have a menu whose entries reside in my vm's data. Is there a way to set that to a static string and then automatically bind that to another string once it exists?

Upvotes: 26

Views: 21177

Answers (3)

Bert
Bert

Reputation: 82439

The vue-i18n plugin is pretty good. They have documentation that follows the standard set by the Vue documentation. The package is kept up to date as well. I would start there.

One thing I like is their support for single file components. You can add an additional tag to the component with component specific translations. Here is the example from their documentation:

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界！"
  }
}
</i18n>

Upvotes: 28

rakensi
rakensi

Reputation: 1447

Another possibility is vuex-i18n, if you want to use the Vuex store. It defines a method and a filter:

{{ 'Item' | translate }}
{{ $t('You have {count} new messages', {count: 5}) }}

Upvotes: 9

adrai
adrai

Reputation: 3168

You might read this article...

I would recommend looking into a i18n lib that is ready to be used in different frameworks, i.e. i18next

There is some vue libs too: i.e. vue-i18next or @panter/vue-i18next

Further you should not only consider that you have to instrument your code (i18n) to get your app/website translated. You should think about the process too - how will you solve continuous localization, how you keep track of progress, etc...

For a translation management+ system you might eg. have a look at locize it plays well with all json based i18n frameworks... and provides a lot more than traditional systems.

Upvotes: 12

Related Questions