useAsyncData vs. useFetch 🤯

Published: 01 January 1970
on channel: Alexander Lichter

18,166

571

🪄 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...
🔗 Docs of useFetch - https://nuxt.com/docs/api/composables...
🔗 ofetch ($fetch) - https://github.com/unjs/ofetch
📺 Inline Composables -    • Organize your Composition API code (2k sub...
📺 Maintaining Vue Reactivity -    • Avoid losing Reactivity in your Vue Applic...

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:   / thealexlichter
Twitch:   / 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

On this page of the site you can watch the video online useAsyncData vs. useFetch 🤯 with a duration of hours minute second in good quality, which was uploaded by the user Alexander Lichter 01 January 1970, share the link with friends and acquaintances, this video has already been watched 18,166 times on youtube and it was liked by 571 viewers. Enjoy your viewing!