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:
netninja.dev/p...
🐱‍💻 Access the course files on GitHub:
Course files - github.com/iam...
🐱‍💻 Vue 3 Tutorial:
On Net Ninja Pro - netninja.dev/p...
On KZbin - • Vue JS 3 Tutorial for ...
🐱‍💻 Tailwind Tutorial:
On Net Ninja Pro - netninja.dev/p...
On KZbin - • Tailwind CSS Tutorial ...
🐱‍💻 Nuxt Docs - code.visualstu...
🐱‍💻 VS Code - v3.nuxtjs.org/...

[@gabrielmihai396]

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

[@jessicagosselin]

Thank you; I was coming to the comments to see if anyone said anything about this, because my requests worked just fine without a key. That is good to know, thanks!

[@ProfesorCafe]

just what I was looking for, thanks Gabriel

[@nemanjarackovic2448]

But now, when i visit product page with same id twice or more, every time request is sent to api? I mean isn't all idea to cache same request, in order to avoid multiple server calls?

[@rycka7260]

@@nemanjarackovic2448 of course it is, and that's your job to do it... tbh, we have all product data already fetched in '/products' page. If data doesn't change that much and you don't need real-time data flow, you can just pass product data from '/products' to product details page. Only if users navigates straight to product details page, then you do fresh fetch.

[@Taki7o7]

many thanks for clarification

[@mitosymicrochips]

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

[@NetNinja]

Thanks for the kind words Ignacio :)

[@Kingside88]

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

[@moretagsgaming8172]

If you are searching for best practices, the best source should be the Nuxt 3 documentation about the useFetch composable. In their example, you can do b) and c) with interceptors, which are pretty easy to write.

[@aigabuskira165]

my solution for this is to use $fetch and what ever you've fetch, save them into useState(your_key), the state data will be transferred to browser, to access the data again in the browser just use useState(your_key) with the same key. why i use $fetch? i have no idea about other solution, but i came up with use $fetch to make interceptor by wrapping it in custom composable function. sry for my bad english

[@kresnaagisna3995]

Yo, I just get into Nuxt. Any suggestion of better tutorial than this one?

[@eotikurac]

@@moretagsgaming8172 nuxt docs is garbage. you can spend all day looking for a solution that might not even be there and if it is, very often the answer is well hidden or in some weird footnote you wouldn't bother looking at.

[@DesertCookie]

@@kresnaagisna3995 This one is pretty good to get you started. However, you absolutely need to read through the documentation of useFetch, useLazyFetch, etc. On there, they have an composable that adds the base URL and authorization headers like moretagsgaming8172 said.

[@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 :)

[@chunkycheese73]

I think it has been patched

[@LS-jv4uh]

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.

[@FacundoColombier]

same here

[@alanreibel1732]

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

[@danielwatson6529]

do u have an example plz?

[@alanreibel1732]

Yes @Daniel Watson , as you can see in the last minute of this video, he's passing de key as a second argument of the Fetch function. I tried without it and it works for me. An example of this could be: - Before: useFetch( uri, { key: id}) - Now: useFetch( uri)

[@sahandsepidar4089]

Agreed

[@TemurbekValiev27]

@@alanreibel1732 thank you

[@daroathdaroath]

{key: id} no longer work for newer version

[@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.

[@MetaBlueAvatar]

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?

[@misschantalbelle]

Same thing for me

[@bouchrabenghazala9508]

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!

[@kitephan9533]

The same with you. Still don't know why

[@yabuking84]

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

[@연이-n7v]

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

[@diegoavendanohernandez9908]

Perfect, exactly what I needed. Love it.

[@sandeshmaharjan8204]

Am getting error, it won't render the page and after reloading the page am getting error saying that Cannot read property of null (reading 'title')

[@nickiminaj0882]

same, did you fix it?

[@Lerndemy]

thanks a lot, next series on next 13 ❤❤

[@diegoavendanohernandez9908]

yes!

[@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

[@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

[@ak-loz]

Why make a fetch request at: `products/` and then another at: `products/:id` Can’t we reduce the requests made here? It’s running slow for me now, there should be a way to optimize that into a single call and just push the necessary information into the page?

[@mohammadaliafrasiaby2347]

very very nice but please create course about jwt in nuxt

[@lancewoolf8236]

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

[@NetNinja]

That's great to hear, thanks Lance!

[@user-xu3so2ug1f]

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

[@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?

[@musafirfisabillah6566]

Hi teach in course 8 when I click on the different product I receive different data back from api . Maybe that but has been patch . btw You are doing and great jobs please put out more nuxt 3 video

[@shazamanything3583]

Can I use your HTML CSS and JavaScript courses for 2023?

[@Realswagoverlord]

yes

[@formixcode]

need more nuxt3 real life projects course

[@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

[@mel-182]

I love you man!

[@NetNinja]

[@aqordeon]

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

[@erpethiopia]

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

[@zuhieralif2450]

My Grid class doesn't seems to exist inside my nuxt project. Anyone care for a help?

[@techwithdavid]

Thanks 🙏🔥

[@abbeed1]

thanks

[@caglaracar5123]

Thanksss !

[@nested9301]

i'm confused why u are fetching data in the components u should create an api folder in the server folder and then fetch the data using $fetch in the server then use useFetch to hit your endpoint and grab all the products ..." i'm I missing something?"

[@rycka7260]

yes, you are missing the point of Vue.js

[@RustyRustacean]

if you are grabbing the ID from the route, what need was there to bind the ID? i mean this: :to="`/products/${p. id)`"

[@musafirfisabillah6566]

and I didnt need to use the key at all

[@Cho1279624]

Neither did I

[@dulshansamarakoon5068]

LOVE YOU brother

[@NetNinja]

Thanks Dulshan!

[@nghiahuy3935]

How can i add auth token in header ?

[@yabuking84]

what about useLazyFetch?

[@_Mafia_]

FakeStoreApi is created by an Iranian Programmer. In hope for Freedom in Iran.❤🕊

[@wovasteengova]

7:55 😂😂

[@towatch]

✌🏻✌🏻🔥

[@sayoko5362]

why not use Axios?

[@dannydevs]

useFetch is built in and has stuff under the hood that's as good as what Axios does (e.g. no need to convert data to JSON, useFetch does it automatically for you). so why not use useFetch?

[@KadekRestuSatyaWardanaRestuSat]

im going to ninja

[@EAbdoAhmedSayed]

Egyptian announced 11/ 11 a revolution against the decorators alsis Could you speak about Our Egyptian revolution

[@larsnobel4279]

'__VLS_ctx.product' is of type 'unknown'.ts-plugin(18046) Property 'title' does not exist on type 'never'.ts-plugin(2339) I tried to directly clone your repository and in my own.

[@larsnobel4279]

What the actually fuck. Closing the application and restarting VScode resolved the issue? Never tried that before.

[@ziyoxojasultonov2883]

💯

[@JJ-je4mz]

This course helped me finally getting started with vue/nuxt, everything just works great

[@NetNinja]

That's awesome, thanks for watching JJ :)