Internationalization in Vue.js

javascript, vue.js

Solution

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>

Problem

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?

Original source