Nuxt 3 Crash Course #8 - Fetching Data

In this Nuxt 3 tutorial, we'll fetch data from a 3rd party api and inject it into our components.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 Vue 3 Tutorial:

🐱‍💻 Tailwind Tutorial:

[mitosymicrochips]

This is by far the best crash course on the subject on YouTube. Thanks!!!

[gabrielmihai]

For those who wonder why useFetch works even without providing a key, it's because now useFetch uses the uri as the key. But you can still provide a key if you need to

[Kingside]

unfortunatly this is not the real world.
In the real world you need somehow to extend it.
Because
a) You have a baseUrl in the config file for your'e api
b) You have different header data like authorization, accept-language etc. which you need to provide every request
c) Often you have to cache your'e data in a store like Pinia.

So it would be very thankful, if you could extend this tutorial what is the best practice.
My feeling with nuxt 3 so far is, you'll find 1000 tutorials how to create a super fancy hello world page.
But nobody cares abour real process solutions. Like authorization

[diegoavendanohernandez]

Perfect, exactly what I needed. Love it.

[LS-jvuh]

At 9:00, perhaps Nuxt has improved the default behavior since you made this video? I didn't have the problem described even before I added the key.

[lancewoolf]

You are amazing man, This has helped me level up Massively! More Nuxt <3

[mickeymegabyte]

another great course from our beloved Net Ninja!

one thing, i didn't need to add the {key: id} to my useFetch method - extra network requests worked fine without it, at least for me :)

[alanreibel]

{ key: id} as a second argument for useFetch seems to be not needed anymore

[yabuking]

Actually didnt need to use key. Was there an update on useFetch?

[eotikurac]

you should expand on data fetching and show how to handle errors. i know you always skip this part but it's very important and you only need to do it once.
people who have jobs in the real world also have real world problems that they cannot work out by following your tutorials.

[SajeelBongale]

Hi Shaun, thank you for this wonderful crash course. It's helping me get up to speed with Nuxt 3 quickly. I tried the above code on my local but found that fetch is making a new call even without the key property being added to the useFetch composable. As per your your video this is not the intended behaviour. Has something changed recently?

[erpethiopia]

how to render product image? in addition how to use pagination or infinite scroll for fetching api? thank you!

[KuroManX]

Is there a way to save the data requested on the products and pass that data directly to the products/${id}, so I can save requests and time?

[bouchrabenghazala]

In 9:28 it worked for me, I see different products when going to the product details. I don't know why it didn't work for you at first. Thank you!

[worldwidelibra]

all the tutorials I have came across states that this should work but when I attempt it just tells me products is not defined

[aqordeon]

I write the same code for fetching data but it did fetch request each page (list products page and product page). Why?

[Tokieejke]

Hi bro, how can i refetch poroducts every time when my locale with i18n changed? i need to refetch products with specified language from strapi

[xusougf]

i get without using a key always the matching product details ... dont know what i made wrong, also if i go to the same product twice there will both times be the api fetch

[hhwnxws]

thank you very much!
i want to know difference between useFetch() and asyncDataFetch() :)

[victorhytrop]

Hey bro! I really want to watch your whole course, but I have troubles with payment system, can I pay by ETH or USDT to you directly? Peace