Nuxt useFetch

up:: Nuxt ⚐ This uses JavaScript parameter desctructuring.

<script setup>
const { books } = await useFetch('https://api.com/books');
</script>

Note: You then have to use the data in a template. Logging it to the console to check is only going to give you a weird string.

This is because it is implicitly a reference (which I guess is the same as a stateful variable?). Use it like this

const { data: books } = await useFetch('https://api.com/books');
const myBooks = books.value;

Or, if we don’t want it to be a proxy you can use toRaw.

useLazyFetch

useFetch freezes the application until the data is loaded. useLazyFetch shows a loading screen instead.