Document composables concept

[pi0]

Nuxt 3 uses Vue 3 with Composition API and unjs/unctx for supporting composables with the implicit context in nuxtApp (plugins, middleware) and nuxt kit too.

However, there are many cases in this needs a better explanation of how it works internally to understand why an issue like nuxt instance unavailable happens and how to fix it with proper usage.

I've made an outline story in #14269 which can probably be used as a basis to initiate this concept page.

[pi0]

@danielroe I think you are better than anyone to write the concept page. If you like to, please self-assign :)

[misaon]

Related #14068

Reproduction

https://stackblitz.com/edit/github-eusand

Describe

Greetings to the Nuxt development team and thank you so much for the great work. I'm trying to create a module that will communicate with our store's API. However, I ran into a problem that has been addressed here a few times. It is about using useAsyncData after await. This is because Nuxt prints the error "nuxt instance unavailable". I understand the reason why this is the case (series of https://www.vuemastery.com/blog/coding-better-composables-1-of-5). I can only use it in the setup part. However, I can't find a way in the Nuxt ecosystem to achieve currency retrieval (see stackblitz reproduction). If I just use $fetch, I lose the great functionality that useAsyncData offers. There is no way in composables or plugins to make two async requests in one method, which is often enough needed.

Is there a way to deal with this issue at the Nuxt level?

Logs

[nitro] [dev] [unhandledRejection] Error: nuxt instance unavailable
    at Module.useNuxtApp (/home/misaon/PhpstormProjects/nuxt-async/node_modules/nuxt/dist/app/nuxt.mjs:142:13)
    at Module.useAsyncData (/home/misaon/PhpstormProjects/nuxt-async/node_modules/nuxt/dist/app/composables/asyncData.mjs:26:38)
    at Object.get (/home/misaon/PhpstormProjects/nuxt-async/composables/useHttp.ts:16:34)
    at Object.getShopBaseCurrency (/home/misaon/PhpstormProjects/nuxt-async/composables/useShop.ts:9:17)
    at /home/misaon/PhpstormProjects/nuxt-async/plugins/bootstrap.ts:13:45
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[daniluk4000]

I was able to test callWithNuxt and it's working just fine. I've finally been able to beat multiple awaits and build Nuxt 2-like useAsyncData in my code, even though I had to use this function.

Can't wait for this to be documented, this function is must-have and very useful.

[floriankapaun]

I was able to test callWithNuxt and it's working just fine. I've finally been able to beat multiple awaits and build Nuxt 2-like useAsyncData in my code, even though I had to use this function.

Was able to achieve a workaround to my problem with your help @daniluk4000, but is that really the recommended approach to do things or is there a better way? 😬

[daniluk4000]

@floriankapaun I've created discussion to improve DX of this behavior with more helper functions, and also to document this callWithNuxt approach: #19567

Sadly discussion received no response :(

I've worked much with Vue and Nuxt internals recently and I can say that callWithNuxt now is the only way to not lose context. In my opinion, if there is no coming fix for context from Vue team this needs to be properly documented and maybe DX-improved.

Speaking of myself, I didn't find any better way to not lose app context on SSR but that.

[danielroe]

That's a nice discussion - sorry, I did not see it until now!