Vue.js and vue-i18n, json from $ajax to object literals

Question

I am using Vue.js with the plugin vue-i18n for internationalization purposes. It accepts a lang and a locales parameters, the later being a list of property names and associated values ( object literals ). As such, referencing an object literals list, either directly in the locales option or stored in a local variable works as expected, such as in the example below:

var locales = {
    "en": {
        "menu": {
            "about": "about",
            "news": "news",
            "contact": "contact"
        }
    },
    "fr": {
        "menu": {
            "about": "à propos",
            "news": "actualités",
            "contact": "contacter"
        }
    }
}

Vue.use(VueI18n, {
    lang: 'fr',
    locales: locales
});

Please note that despite the formatting (the double quotes all the way through the list), the above is not a json array , but an object literals list with string literals for the name of the properties .

Now, what I've been struggling about is to relying on a Json file instead of declaring an object literals list directly in my script. For instance, I've tried an ajax request, such as this:

Vue.use(VueI18n, {
    lang: 'fr',
    locales: $.ajax({
                 url: "../resources/i18n/locales.json",
                 dataType: "json",
                 type: "GET",
                 success: function(data) {
                     console.log(data);
                 }
             })
});

The url string is pointing at a locales.json file with the exact same data and formatting as above, with the only difference that it is written inside square brackets.

I haven't had much success with this approach though, which in my mind doesn't make a lot of sense since data seems to be correctly parsed. This is what I get in the console:

Array[1]
  0: Object
    en: Object
      menu: Object
        about: "about"
        contact: "contact"
        news: "news"
    fr: Object
      menu: Object
        about: "à propos"
        contact: "contacter"
        news: "actualités"

I wonder what I'm doing wrong?

Answer 1

$.ajax returns an xmlHttpRequest object, not a value. You have to wait until the callback function of ajax before the value is available:

$.ajax({
    url: "../resources/i18n/locales.json",
    dataType: "json",
    type: "GET",
    success: function(data) {
        Vue.use(VueI18n, {
            lang: 'fr',
            locales: data
        });
        console.log(data);
    }
})

This also assumes that Vue is available globally

Answer 2

You could try this approach:

// install the plugin
Vue.use(VueI18n)

// load the `fr` locale dynamically
Vue.locale('fr',
  function () {
    // should return a promise
    return new Promise(function (resolve, reject) {
      $.ajax('../resources/i18n/locales.json').done(resolve).fail(reject)
    })
  },
  function () {
    vue.config.lang = lang
  }
)