title: Vue-Router and i18n with Nuxt
body: <p>I am transferring a project with a vue-router from Vue.js to Nuxt.js.</p>
  <p>After hours of trying and googleing I managed to get everything to work but this one issue that I cant get to work: **Integrating i18n and vue-router with Nuxt.js **</p>
  <p><strong>Two problems I could not solve yet:</strong></p>
  <ol>
  <li>How to properly update i18n.locale in my router.js file?</li>
  <li>How to tell nuxt-i18n that I am using my own router? It now obviously complains about every page that the <code>Route with name 'XXX___en' does not exist</code>.</li>
  </ol>
  <hr />
  <p>In my plain vue project the following code works, and I can change the locale in router.js and it would propagate and update this.$i18n.</p>
  <blockquote>
  <p>i18n.js</p>
  </blockquote>
  <pre><code>import Vue from 'vue'
  import VueI18n from 'vue-i18n'
  
  import termsHTML from './translations/terms'
  import privacyHTML from './translations/privacy'
  import imprintHTML from './translations/imprint'
  
  Vue.use(VueI18n)
  
  export const i18n = new VueI18n({
    locale: 'en',
    fallbackLocale: 'en',
    messages: { ... }
  }
  </code></pre>
  <blockquote>
  <p>router.js</p>
  </blockquote>
  <pre><code>...
  import {
    i18n
  } from &quot;@/plugins/i18n.js&quot;;
  ...
  router.beforeEach((to, from, next) =&gt; {
  // Set locale to new language
  // I CANT GET THIS NEXT LINE WORING IN NUXT.JS
  if (i18n.locale !== lang) i18n.locale = lang
  ...
  }
  </code></pre>
  <hr />
  <p>Now in Nuxt I want to do the same. I imported the nuxt-i18n plugin like this in nuxt.config.js:</p>
  <pre><code>['nuxt-i18n', {
    seo: true,
    locales: [{
      code: 'en',
      name: '',
      iso: 'en-US'
    },
    {
      code: 'de',
      name: '',
      iso: 'de-DE'
    }],
    defaultLocale: 'en',
    vueI18n: {
      locale: 'en',
      fallbackLocale: 'en',
      messages: translations
    }
  }],
  </code></pre>
  <hr />
  <p>I tried the following in my router without success.</p>
  <blockquote>
  <p>router.js</p>
  </blockquote>
  <pre><code>import nuxtConfig from &quot;~/nuxt.config&quot;;
  import VueI18n from 'vue-i18n'
  Vue.use(VueI18n)
  // access the i18n module which is the second item in the modules array
  // then take second item which is the config object and take the vueI18n property
  let i18n = nuxtConfig.modules[1][1].vueI18n
  ...
  if (i18n.locale !== lang) i18n.locale = lang
  </code></pre>
  <p>This does not error, but does also not work. Vue.use() is probably wrong here, as this registers a new component, I guess my code does not refer to the right i18n?</p>
  <p>Thanks for any help</p>