Why useFetch callbacks is not have nuxt

[Venegrad]

Environment

Operating System: Darwin
Node Version: v18.16.0
Nuxt Version: 3.10.3
CLI Version: 3.10.1
Nitro Version: 2.9.1
Package Manager: yarn@1.22.19
Builder: -
User Config: alias, runtimeConfig, modules, i18n, app, css, vite
Runtime Modules: @nuxtjs/i18n@8.1.1
Build Modules: -

Reproduction

<script setup> const { data, pending, error, execute } = useLazyFetch('/api/test', { onResponseError: () => navigateTo("/") }) </script>

Describe the bug

When i trying to handling error, on ssr default useFetch callback is not available to using nuxt actions like navigateTo or any composables, i cant call any methods. Then how i can handling errors, and why u added error handling, if i cant using any nuxt actions in them?

Error: [nuxt] 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. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables.

Additional context

No response

Logs

No response

[manniL]

Because the onResponseError interceptor function runs without the Vue/Nuxt context. The docs linked in the error message and this comment give more insights.

As a workaround, you can get the nuxt app and try runWithContext

const nuxtApp = useNuxtApp()
const { data, pending, error, execute } = useLazyFetch('/api/test', { onResponseError: () => nuxtApp.runWithContext(() => navigateTo("/")) })