useAsyncData vs. useFetch 🤯

🪄 Data fetching is essential in every application - also when using Nuxt. Luckily, useAsyncData and useFetch are provided by the framework to make data fetching a breeze. But how do they work? Which should you use? And why are there TWO? All that will be answered in this video 🙌🏻 Key points: 🎛️ What data composables are! 🔄 $fetch as fetching function 🤔 Is useFetch the same as useAsyncData and $fetch? 💡 How to rebuild useFetch with useAsyncData --- Links: 🔗 Docs of useAsyncData - https://nuxt.com/docs/api/composables/use-async-data/ 🔗 Docs of useFetch - https://nuxt.com/docs/api/composables/use-fetch/ 🔗 ofetch ($fetch) - https://github.com/unjs/ofetch 📺 Inline Composables - https://www.youtube.com/watch?v=iKaDFAxzJyw 📺 Maintaining Vue Reactivity - https://www.youtube.com/watch?v=sccsXulqMX8 Don't forget to hit that "Subscribe" button, ring the notification bell and give a thumbs up! 🌐 Connect further: Website: https://www.lichter.io Twitter/X: https://twitter.com/TheAlexLichter Twitch: https://www.twitch.tv/TheAlexLichter Chapters: 00:00 Intro and Agenda 01:00 Demo app overview and Scenario 03:20 Using useFetch 04:15 Adding query params 05:23 Make them reactive 06:25 TASK - What do you think? 06:50 SOLUTION 07:30 Replicate the behavior in useAsyncData 08:00 Looking into $fetch 09:15 Using useAsyncData 11:15 Adding query params 12:20 Reactivity with useAsyncData 14:15 Summary