Using callWithNuxt in asyncData and fetch (Options API)

[Piscinelove]

Hi everyone,

We are in the final stages of migrating our projects to Vue 3. And yes… still no full Nuxt 3 for us, the technical debt is huge! 😅

This has been a long and complex migration since all our projects (around a hundred) rely heavily on our internal modules. We have been using Nuxt Bridge for several months and have migrated a large part of our logic to composables.

However, we are currently facing an issue: we want to move the logic from our asyncData and fetch hooks into these new composables, but many of them rely heavily on useNuxtApp().

We noticed that Nuxt Bridge handles this properly for plugins and middleware. After reviewing the code, we considered using callWithNuxt to wrap our logic inside these hooks, like this:

async asyncData(ctx) {
  callWithNuxt(ctx.$_nuxtApp, async () => {
    const cookie = useCookie('my-cookie');
    const page = await useApi('/my-api');
  }, [ctx.$_nuxtApp]);
},

async fetch() {
  callWithNuxt(this.$nuxt.context.$_nuxtApp, () => {
    const cookie = useCookie('my-cookie');
    const page = await useApi('/my-api');
  }, [this.$nuxt.context.$_nuxtApp]);
},

We ran some quick tests, and it seems to work fine. However, we are unsure about the implications and potential issues that this approach might cause.

This would only be a temporary solution to help us migrate our logic progressively. Our plan is to first migrate all non-blocking hooks to useLazyAsyncData and useLazyFetch. The remaining hooks that block rendering will only be migrated in the final step once we are fully on Vue 3, at which point we will transition to useAsyncData and useFetch.

Our main question is:

Is it recommended to use callWithNuxt this way inside asyncData and fetch to migrate logic into composables that depend on useNuxtApp ? Are there any pitfalls or risks we should be aware of?

Thanks in advance for your feedback and advice! 😊