Internationalization in Vue.js

Question

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?

Answer 1

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> 

Answer 2

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.