vue.js - Fetching global api data in nuxt

Question

I'm starting Nuxt project and I have to fetch basic data from my backend. for example language dictionary or some data for leftbar and etc. in Vue I can just call everything I need in App.vue and save it in vuex and then use whenever I want, but with Nuxt every page is different and I'm curious where should i call this global data api calls. I'm guessing I have to create middleware and call actions if data is not loaded already or there is better solution?

Answer 1

You mention it's global data and you're using universal mode- I think you're looking for nuxtServerInit(). This store action runs once on the server, before created, mounted hooks etc. You can use it to populate your store with data that your components (including pages) rely on.

Take a look at the docs.

actions: {
  nuxtServerInit ({ commit }, { req }) {
    if (req.session.user) {
      commit('user', req.session.user)
    }
  }
}