title: Loading json translation files in a standalone vue2 spa
body: <p>I have a single page app index.html and i want to translate using json files in the same folder as the index.html file. The json files are inside the locales directory. I put them there to enable automation in translating. My code looks like this</p>
  <pre><code>var base_url = window.location.origin;
  console.log('base url', window.location.origin)
  
  function loadLocaleMessages () {
    const locales = require.context('locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
    const messages = {}
    locales.keys().forEach(key =&gt; {
      const matched = key.match(/([A-Za-z0-9-_]+)\./i)
      if (matched &amp;&amp; matched.length &gt; 1) {
        const locale = matched[1]
        messages[locale] = locales(key)
      }
    })
    return messages
  }
  
  const i18n = new VueI18n({
    locale: 'de',
    messages:loadLocaleMessages()
  });
  
  const vueApp = new Vue({
    el: '#app',
    i18n:i18n,
    data: { 
     display: 'data...' 
    },
  
    mounted () {
     console.log('store accessed', this.display)
    },
    
    methods: {
     change_language: function (event) {
      event.preventDefault();
      var selected_language = event.target.value
      this.$i18n.locale = selected_language
      }
  }
  })
  </code></pre>
  <p>The problem is using <code>require.context</code> inside the browser although using require from cdn <code>&lt;script src=&quot;https://requirejs.org/docs/release/2.3.5/minified/require.js&quot;&gt;&lt;/script&gt;</code></p>
  <p>Since require is available on webpack, does fetching require from cdn exempt us from using browsersify?</p>
  <p>My locale en.json looks like this</p>
  <pre><code>{
  &quot;app_title&quot;: &quot;Vendor Section Section&quot;,
  &quot;login&quot;: &quot;Login&quot;,
  &quot;register&quot;: &quot;Register&quot;,
  &quot;forgot_password&quot;: &quot;Forgot Password&quot;,
  &quot;login_with_google&quot;: &quot;Login With&quot;,
  &quot;register_with_google&quot;: &quot;Register With&quot;,
  &quot;email&quot;: &quot;Email&quot;,
  &quot;password&quot;: &quot;Password&quot;,
  &quot;confirm_password&quot;: &quot;Confirm Password&quot;,
  &quot;vendor_forgot_password&quot;: &quot;Vendor Forgot Password&quot;,
  &quot;vendor_registration&quot;: &quot;Vendor Registration&quot;,
  &quot;vendor_login&quot;: &quot;Vendor Login&quot;
  }
  </code></pre>
  <p>How can i load the locales and be able to use the locale file in my spa?</p>