Vue.js and vue-i18n, json from $ajax to object literals
<p>I am using Vue.js with the plugin <a href="https://github.com/kazupon/vue-i18n" rel="nofollow">vue-i18n</a> for internationalization purposes. It accepts a <code>lang</code> and a <code>locales</code> parameters, the later being a list of property names and associated values (<code>object literals</code>). As such, referencing an <code>object literals</code> list, either directly in the <code>locales</code> option or stored in a local variable works as expected, such as in the example below:</p>

<pre><code>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
});
</code></pre>

<p>Please note that despite the formatting (the double quotes all the way through the list), the above is not a <code>json array</code>, but an <code>object literals</code> list with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Object_Literals" rel="nofollow"><code>string literals</code>for the name of the properties</a>.</p>

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

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

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

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

<pre><code>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"
</code></pre>

<p>I wonder what I'm doing wrong?</p>