Internationalization in Vue.js

Question

What are the best internationalization practices in Vue?

I am currently thinking of having a “strings” object that contains all the strings, and then a bit of ajax magic to update this strings object based on a json file with translated strings in certain languages.

Anyone have any better ideas? I am currently having problems using the string method, since the string object must be loaded first.

Is there a placeholder function for strings in Vue? For example, I have a menu whose entries are stored in my vm data. Is there a way to set this to a static string and then automatically bind it to another string if it exists?

Answer 1

The vue-i18n plugin is pretty good. They have documentation that conforms to the standard set by the Vue documentation. The package is also being updated. I would start there.

I really like the support for individual file components . You can add an additional tag to a component using component-specific translations. Here is an example from their documentation:

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

Answer 2

You can read this article.

I would recommend looking into the i18n lib, which is ready for use in different frameworks, i.e. i18next

There are also several vue libs: i.e. vue-i18next or @ panter / vue-i18next

In addition, you should not only consider that you need to measure your code (i18n) in order to translate your application / website. You should also think about this process - how you decide on continuous localization , how you track progress, etc.

For a translation management system + you can, for example. take a look at locize , it works great with all json-based i18n basics ... and provides much more than traditional systems.

Answer 3

Another feature of vuex-i18n is if you want to use Vuex storage. It defines a method and a filter:

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