why does this cause error?
i'm using useRequestEvent & useAsyncData in 2 composables, which are combined in the third one named
useBoth. it causes error A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.
if inside useBoth i comment out one of the composables, the error is gone
reproduction herertabulov
StackBlitz
useRequestFetch-error-nuxt4 - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
2 Replies
Hi @yzs. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
The error occurs because Nuxt composables like
You are seeing this error because at least one of your composables using
useRequestEvent (and many others) require access to the Nuxt context, which is only available in specific places: inside a Vue <script setup>, a setup function, a Nuxt plugin, Nuxt middleware, or a Nuxt hook. If you call such composables outside these contexts—such as at the top level of a module, or in a function that is executed outside the allowed lifecycle—you'll get the error:
A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function.When you combine two composables (each using
useRequestEvent) into a third composable, you must ensure that all of them are only ever called within the correct context. If any of them are called outside of a setup function or the other allowed places, the Nuxt context will not be available, and the error will be thrown.
This is explained in the Nuxt documentation:
Many composables and utilities, both built-in and user-made, may require access to the Nuxt instance. This doesn't exist everywhere on your application, because a fresh instance is created on every request. Currently, the Nuxt context is only accessible in plugins, Nuxt hooks, Nuxt middleware (if wrapped in defineNuxtRouteMiddleware), and setup functions (in pages and components) Docs: NuxtApp.
And more specifically:
That means that (with very few exceptions) you cannot use them outside a Nuxt plugin, Nuxt route middleware or Vue setup function. On top of that, you must use them synchronously - that is, you cannot useSo, to fix your issue, make sure that your composables are only called within the allowed contexts, and not at the top level of a module or outside of a setup function. If you need to combine composables, ensure the combined composable is also only used in the correct context. If you need to access the Nuxt context in a more flexible way, you can useawaitbefore calling a composable, except within<script setup>blocks, within the setup function of a component declared withdefineNuxtComponent, indefineNuxtPluginor indefineNuxtRouteMiddleware, where we perform a transform to keep the synchronous context even after theawaitDocs: Auto-imports.
nuxtApp.runWithContext, but this is an advanced use case and not typically necessary for most applications.
Summary:You are seeing this error because at least one of your composables using
useRequestEvent is being called outside of a setup function, plugin, middleware, or hook, which is not allowed in Nuxt 3. Always ensure composables that require the Nuxt context are only called in the correct places in your app's lifecycle.
For more details, see the official documentation: Vue and Nuxt Composables Context, NuxtApp Context, and useRequestEvent.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@257562536600141825> Kapa.ai is still learning and improving, please let me know how I did by reacting below.