Nuxt useFetch/useAsyncData twice in method throws error: `nuxt instance not available`

Question

I encounter the classical nuxt instance not available error when server side rendering a nuxt page containing the following logic:

<script setup>
const getImageOne = async () => {
  return await useFetch('https://dog.ceo/api/breeds/image/random');
};

const getImageTwo = async () => {
    return await useFetch('https://dog.ceo/api/breeds/image/random');
};

const getImages = async () => {
  return [await getImageOne(), await getImageTwo()];
};

const responses = await getImages();
const dogOne = responses?.[0]?.data?.value;
const dogTwo = responses?.[1]?.data?.value;
</script>

<template>
  <div>
    <p>Dog 1: {{ dogOne }}</p>
    <p>Dog 2: {{ dogTwo }}</p>
  </div>
</template>

The issue seems to be that useFetch is called twice in one method call.

Answer 1

The issue with composable usage raising nuxt instance not available errors is already well known, see issue #14723 for reference.

A solution in this case would be to use the callWithNuxt method and provide the nuxt instance manually like this:

<script setup>
import { callWithNuxt } from 'nuxt/app';

const getImageOne = async () => {
  return await useFetch('https://dog.ceo/api/breeds/image/random');
};

const getImageTwo = async (app) => {
  👇
  return await callWithNuxt(
    app,
    async () => await useFetch('https://dog.ceo/api/breeds/image/random')
  );
};

const getImages = async () => {
  👇
  const app = useNuxtApp();
  return [await getImageOne(), await getImageTwo(app)];
};

const responses = await getImages();
⋮