Sometimes you have to call multiple APIs for a nuxt page to render. If called like this

const response1 = await useFetch("url1");
const response2 = await useFetch("url2");

Due to the nature of await these request go out sequentially, delaying the page load. On the other hand, with this approach, you do not have to handle the state where the data is not yet available to vue.

To solve this, we can group the request and do a Promise.all to have on single await that waits for all request in parallel.

const responses = Promise.all([useFetch("url1"), useFetch("url2")]);
const url1Data = responses[0].data;
const url2Data = responses[1].data;

Now requests load in parallel and we can use the goodies that nuxt 3 gives us. Like refresh or error.

This works with anything that needs to be awaited.