How to use vuex-rest-api with nuxt.js auth-module

[appinteractive]

Hey I have the following issue...

I need nuxt auth-module to work with that package but at the point of creation I cant pass any axios instance, and thre is no global one. The result is that I get 401 response as I cant use the correct axios instance with the auth logic. Any idea?

in Nuxtj.s I create a store

import userStore from './users'

const createStore = () => {
  return new Vuex.Store({
    state: {
    },
    mutations: {
    },
    modules: {
      users: userStore
    }
  })
}

export default createStore

users store

import Vapi from 'vuex-rest-api'

const userStore = new Vapi({
  baseURL: '/api',
  state: {
    users: [],
    groups: []
  }
})
  .get({
    action: 'getUsers',
    property: 'users',
    path: '/users/getUsersTableData'
  })
  .get({
    action: 'getGroups',
    property: 'groups',
    path: '/users/getGroupsTableData'
  })

export default userStore.getStore()

[christianmalek]

Yes. It works with Nuxt.

[appinteractive]

@christianmalek sorry I was not ready with the descriotion. I have an issue in conbination with nuxt-auth as the axios instance can`t be passed. At lease I don't know how.

[christianmalek]

Could you please provide a link to nuxt-auth?

[appinteractive]

sure added it to the description, ment auth-module and not nuxt-auth...
https://github.com/nuxt-community/auth-module

[appinteractive]

currently I am at the state of having something ugly like this:

import Vuex from 'vuex'
import userStore from './users'

const createStore = () => {
  return new Vuex.Store({
    state: {
    },
    mutations: {
    },
    // modules: {
    //   users: userStore(Vuex)
    // },
    actions: {
      nuxtServerInit ({dispatch}, {app}) {
        dispatch('init', {store: app.store, axios: app.$axios})
      },
      async init ({state}, {store, axios}) {
        await store.registerModule('users', userStore(axios));
      }
    }
  })
}

export default createStore

with that I still have to call that on the client to instantiate the module with the correct axios instance

await this.$store.dispatch('init', {store: this.$store, axios: this.$axios})

[appinteractive]

found a solution for now:

I can register it by using the registerModule() method on the store, inside a plugin that is loaded after the axios initialization.

plugins/init-store-modules.js

export default async ({store, app}) => {
  await store.dispatch('initStoreModules', {store: store, axios: app.$axios})
}

store/index.js

import Vuex from 'vuex'
import userStore from './users'

const createStore = () => {
  return new Vuex.Store({
    state: {
    },
    mutations: {
    },
    // modules: {
    //   users: userStore()
    // },
    actions: {
      async initStoreModules ({state}, {store, axios}) {
        await store.registerModule('users', userStore(axios));
      }
    }
  })
}

export default createStore

You could also register that inside the plugin but I like to have the module registration inside the store.

@christianmalek Maybe that should be added to the readme with an example or similar.

[christianmalek]

Hey @appinteractive !

I've just tried 30min to make the axios instance accessible to vuex-rest-api in combination with nuxt-auth (which uses nuxt-axios) and didn't find any solution. I didn't think about registering the store with an action. Nice idea!

At the moment I also don't know how I could simplify this process. Do you have any ideas?

I will definitely add this to the readme. Thanks!

[appinteractive]

@christianmalek I think you could provide your package as a nuxt module, but that I would not know how to register the stores in a sane way.

[christianmalek]

I will look into this. But I don't have much experience with nuxt.

[christianmalek]

@appinteractive I've added an section: https://christianmalek.github.io/vuex-rest-api/miscellaneous.html#nuxt

[appinteractive]

Yeah thanks for mentioning 😀

[juandl]

@christianmalek New Update:

store/index.js

import Vuex from 'vuex'
import news from "./posts";

const createStore = () => {
	return new Vuex.Store({
		...news
	})
}

export default createStore

store/posts.js

import Vapi from "vuex-rest-api";

const posts = new Vapi({
  baseURL: "http://demo.com/api",
  state: {
      posts: []
    }
  })
  .get({
    action: "getPosts",
    property: "posts",
    path: "/posts"
  })
  .getStore();

export default posts;

[christianmalek]

Hello @juandl !

The issue was passing a specific axios instance to Vapi. Does this work with your code?

[juandl]

Hello @christianmalek, I had the same problem in Huxt.js in this way I solved it.

[christianmalek]

@juandl But you don't pass any specific axios instance in your code example which was necessary for nuxt-auth @appinteractive, doesn't it? So how does this work?