[2386] Plugins: custom i18n

Hi, for my e-commerce store I'm writing a very basic i18n plugin. I tried vue-i18n but unfortunately it doesn't play well with SSR, and I risk to get penalised a bit for SEO. So the plugin looks like the following:

import Vue from 'vue'

const I18nContent = {
  source: {},
  getLocale: function (locale) {
    this.source = require(`../server/content/locals/${locale}.js`)
  }
}

Vue.use(I18nContent)

export default ({ app }, inject) => {
  app.$i18nContent = I18nContent
}

I can see $i18nContent in the nuxtServerInit() function and, based on the request (.fr, .es etc) I can initialize the relevant content. Aa follows:

actions: {
  async nuxtServerInit ({ commit }, { req }) {
  // some logic where I define my locale and I do other stuff
  // ....
  // get localized content
  this.app.$i18nContent.getLocale(locale)
  }
}

The problem is that I can't access the $i18nContent instance from my Component/page, like so:

<template>
   <div>
     <p>{{ $i18nContent.myKey }}</p>
     <!-- $i18nContent is undefined -->
  </div>
</template>

Anyone had a similar issue or suggestion on how to go about it?

When I started the project I was analysing the incoming request on nuxtSeverInit() and loading the localised content on the Vuex Store. However, by doing a bit of research I realised this is a wrong approach. Local content has nothing to do with the state of the application (at least the static content) and it shouldn't be there. Also, this was causing the source code of the rendered page to be huge (window._NUXT), which could lead to performance issues.