Nuxt instance disappears after calling $fetch in a composable (nuxt instance unavailable)

Environment

---

• Operating System: Windows_NT
• Node Version: v16.11.1
• Nuxt Version: 3.0.0-rc.6-27668034.5232c1b
• Package Manager: yarn@1.22.15
• Builder: vite
• User Config: vite
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://github.com/Luffyyy/nuxt-instance-bug https://stackblitz.com/edit/github-eh8ppf?file=composables/useTest.js

Describe the bug

I’m not super sure how to describe the bug, but in my main project I’ve had weird situations where a fetch request would run just fine and then another one would error with “nuxt instance unavailable”. But I got it to a point it does something that is obviously not normal and allowing me to call anymore composables that rely on Nuxt instance.

Essentially running any composable that needs nuxt instance (useNuxtApp), fetch and then useNuxtApp again errors with “nuxt instance unavailable” which doesn’t make any sense.

Additional context

No response

Logs

No response

[danielroe]

Basically after an async operation, we no longer have access to the nuxt context (to avoid sharing state with other requests). Vue composables should almost always be synchronous, with a very few exceptions. In general you should get a reference NuxtApp at the beginning of your composable, and then consume/use it afterwards, rather than getting it at the point of use.

Nuxt does perform a transform for defineNuxtRouteMiddleware and defineNuxtPlugin to allow using nuxt composables after async operations, and Vue does the same within <script setup>. But those are the exceptions, not the rule.

I think this probably needs to be explained more clearly in the docs.

[danielroe]

Let’s track in https://github.com/nuxt/framework/issues/6996.