Personalizing for interest: data-fetching, nuxt3 and complexity: complex. Manage your personalisation profile.
my name is tim Benniks and this is aturbo tutorialin this short tutorial we will belooking at how you can query data froman external api and put that data on thescreen in next threehowever this is not just a simple querywe're going to add in a bunch of otherthings like adding a loading state butalso a refresh for like when you clickload more or read more or something likethat so this is a little bit moreof a real life scenario rather than justlet me query something show it on thescreen this is a bit more fancy alrightso let's go to the computer and have alook so we are in vs code here this is acompletely clean Nuxt 3 projectno configuration nothing added just thelatest next tree so in here what we'relooking at is when you look at this codethere's quite a bit going on butactually it's quite simpleso what we're doing here is we arequeryinguman api that returns conference talksthat i'm speaking at like my conferencetalksright and so if we click on that linkand then we remove that broken thingyhere basically this is what that returnsso if i limit it to one it gives me oneif i click 10 it gives me 10 and theseare my latest talks of the conferencethat i'm speaking atand basically what this is doing we areactually utilizing the use async dataand in inside of that we are actuallyfetching that stuffand these talksas you just saw on the url there's alimit right you can set one or two or200 or whatever and we're using that sowhat i've done is by default i've setthe limit to two docsand sowe're binding whatever data comes backfrom that composable use async data tothe talksand so then herewe are looking at the bending statewe're loading the talks and if it's notloading we're actually showing it andthere's also a little button that saysshow me all the talks so let's have alook so right now let's just refreshthis is two talks because that ref thatwe just set for count was two talksand so now when i click load all thetalks it's loading it's at a pendingstate and now it came back with 65 talkswow i almost cannot believe i did 65talks that's a little crazyanyways outside of that you can seethere's lots of other data now here wehad a loading state and we had to clicka button to load all the talks and sohow we've done that is i have a see allfunctionand that cl function sets that limit refthat we said in the beginning that wasinitially 2 to 200and then there's the magic of nux3 andfetching i literally hit the refreshfunction and that refresh function issomething that came back from the usagedataand so basically it just refreshes thatajax call or that fetch or whatever youwant to call it with the new data thatwas set to limit which is loaded hereand then it justre-kind ofrebinds the stuff that comes from thatnew query and then there you go andthere's basicallynot much to it and adding a lot more anda default set of how much you want toquery is actually quite simplethat's it that's what i wanted to showyou today so thank you for watching andi'll see you in the next turbo tutorialcheers
Learn how to query an external API and how to implement "read more" functionality.
We'll be using the following features:
Let's do it...
Learn how to query an internal Nuxt API route from your front end using useFetch
Learn how to pick and transform data coming back from an API call in Nuxt 3