How to use it with nuxt's axios-module ?

[sourenaraya]

I am using axios-module for nuxt, primary usecase is — different base url for SSR and browser. In case of server rendering, backend available at http://backend:5000/ and in browser its available on the same host. So, config for axios be:

  axios: {
    baseURL: 'http://backend:5000/api',
    browserBaseURL: '/api',
    proxy: true
  }

in my store/articles.js i have

import createCRUDModule from 'vuex-crud'

const crudModule = createCRUDModule({
  resource: 'articles',
  client: this.$axios
})

const state = () => crudModule.state

const { actions, mutations, getters } = crudModule

export {
  state,
  actions,
  mutations,
  getters
}

Aaand its not working as expected. Base urls defined in nuxt.config.js ignored completely. Axios doing requests to http://127.0.0.1:80/api instead of http://backend:5000/api

Hovewer, if i use axios in a classic manner, like this.$axis.get('/articles'), its working as expected on server and in browser.

Am i missing something?

[sourenaraya]

as temporary workaround i am using proxy module for nuxt, but this is suboptimal

[sourenaraya]

I have no idea what's going on here.

setting client option to this.randomPropOfThis has same behavior as this.$axios, this.$http and so on. any property of this works as a client. Anything else set as client doesnt work at all, because .get() method is not here.

What the hell? Any idea?

[sourenaraya]

Ok, its because this.$axios is undefined. and defaultClient silently being used instead.

[sourenaraya]

Ok, as workaround i am using method described on nuxt-community/axios-module#28, its working only in browser, but its fine for me.