Using composable in hooks

[damienroche]

Hi,
I would like to know the right way to use rstore with composables in a Nuxt project.
In my case I have an axios plugin which use some composables for authentication and other logic.

plugins/axios.ts

export default defineNuxtPlugin(() => {
  const userStore = useUserStore();
  ...
})

and I would like to use it into my rstore plugin

export default defineRstorePlugin({
  ...
  hook('fetchFirst', async (payload) => {
      const client = useNuxtApp().$axios as CustomAxiosInstance
      if (payload.key) {
        const result = await client.$get(payload.key)
        payload.setResult(result)
      }
  }),
})

It seems to work as data is fetched, but in my console I see error :
A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. at Module.useNuxtApp at rstore/plugins/api.ts

Is there a sort of plugin order load issue for this case ?

[gabrielstuff]

Met the same issue. Actually you can use composable but sometimes and for certain cases it fail. For instance, I've noticed it fails when I use a definePageMeta in the page that use useStore then it throws the error. Something is breaking depending on the lifecycle of Nuxt.

[gabrielstuff]

@Akryum here is a demo https://codesandbox.io/p/github/gabrielstuff/rstore-demo/main
A simple dummy composable works but when using useRequestHeaders(["cookie"]); it fail.

[gabrielstuff]

Moving the call to useRequestHeaders outside of the hook and passing down the result of useRequestHeaders from the store.queryMany call did worked out for me.

I met an other issue I do not understand for now : vuejs/pinia#2962
I dodged it by destructing the cookie object and reconstructing it.

[Akryum]

@damienroche Did you try moving const client = useNuxtApp().$axios as CustomAxiosInstance just outside of the hook?