title: Accessing app context from custom .js files for fetching locale messages
body: <p>I am building Vue.js application using Nuxt.js in SSR mode. I have <code>axios</code> and <code>vue-i18n</code> plugins in my project.</p>
  <p><code>nuxt.config.js</code> :</p>
  <pre><code>export default {
    mode: 'universal',
    // some irrelevant configs
    modules: [
      '@nuxtjs/axios',
      'nuxt-i18n',
    ],
    i18n: {
      locales: [
        {
          code: 'en',
          name: 'English',
          file: 'en-EN.js'
        },
        {
          code: 'de',
          name: 'Deutsch',
          file: 'de-DE.js'
        }],
      defaultLocale: 'en',
      vueI18n: {
        fallbackLocale: 'en',
      },
      lazy: true,
      langDir: 'locales/',
      vuex: {
        moduleName: 'i18n',
        syncLocale: true,
        syncMessages: true,
        syncRouteParams: true
      },
    },
    /* Axios module configuration */
    axios: {}
  }
  </code></pre>
  <p>As you see i18n is set to <strong>lazy</strong> loading. And messages are taken from <code>locales/en-EN.js</code> and <code>locales/de-DE.js</code> files. In the files I want to make a request to a backend-api which will serve me messages. <code>locales/en-EN.js</code> :</p>
  <pre><code>export default async function (context) {
    return await context.$axios.get('backend-api');
  }
  </code></pre>
  <p>However when I load the page it says that <code>$axios</code> is undefined: <code>Cannot read property 'get' of undefined</code>. But as soon as I start switching between languages, application receives translations. So my guess is that server while attempting to access <code>$axios</code> from context fails, but on client (Browser) it succeeds. What is the correct way of accessing <code>$axios</code> module from Nuxt <code>context</code>?</p>