Static GitHub Issues

[2416] Initialising a Plugin based on Vuex state, nuxtServerInit()

prev: Using data from $store cause glitch page transition on leave
next: What time does RC12 go online? my bro!

Hi,

I am creating a custom plugin which instantiation relies on application state set in nuxtServerInit() method.

What happens is the following:

  • In nuxtServerInit() I analyze the req.headers.host and I determine which country the request is coming from.
  • I commit an action which set state.lang to country

Now, at this point I have a custom plugin which simply adds a $i18n object to the Vue instance. The object is coming from an headless CMS where I manage my content.

// plugins/i18n.js
export default ({ app, store }, inject) => {
  const I18n = require(`../content/locals${store.state.lang}.js`)
  inject('i18n', I18n)
}

I have two problems here: 1. when the plugin is initialised the nuxtServerInit hasn't run yet, so the content won't be loaded 2. if I try to solve problem one and I define $i18n as an empty object, and then I try to require the translated content from nuxtServerInit() like so:

// plugins/i18n.js
export default ({ app, store }, inject) => {
  const I18n = {}
  inject('i18n', I18n)
}
// in store/index.js within the nuxtServerInit method
   this.$i18n = require('`../content/locals${store.state.lang}') 

this.$i18n will be filled with my content on the server side, but on the client side it will look like an empty object.

Is there any way to make my plugin init to persist btw server and client side?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2096">#c2096</a>)</em></sub></div>