Personalizing for interest: data-fetching, nuxt3 and complexity: easy. Manage your personalisation profile.
my name is Tim Benniks and this is a turbotutorialso in this quick tutorial we will belooking at how you can create internalapi routes in next three and showwhatever data comes out of these on thescreenand actually it's not that complicatedbecause next three has a bunch ofconvenience methods built in and we'llbe using these today so it won't besuper advanced we'll just go over thebasics and you'll see how easy it is solet's go into the laptop here i'll showyou my vs code and my browser and allthe things we need anyways we're in thebrowser here now and as you can see thisis a very clean setup of a just new noxproject there's not even anything in theconfigso in my app.view i am querying the apifriends api route that i made by usinguse fetch and you can see there's anawait here and it's in a script setuptagand because of this there's top levelawaits so you don't have to docomplicated things it just works likethis and then we bind the data thatcomes from that to the friends propertyand then we show that on the browser solet's go there and basically this iswhat it shows and if you don't knowfriends just yetyou're probably a bunch younger than meso go to netflix and watch it you'lllove it anywaysso how i've done this you can actuallymake a server folder then an api folderand put friends insideand so now it will if you query apifriendswhatever is returned herewill be whatever comes out of thatendpoint in json which is super easy andsuper convenientand so right now these are just twolines of a friends episode that's quiteiconic and so i'm literally returningsomething here what you can also do isan api call with fetch or something elseto a third-party script or a third-partydata source and then return that herethat just works for me now i just typethis in because why not keep it simplerightand sothis is the simplest way you can do thatthere are other options here you havesomething called use lazy fetch or useasync data there's a whole bunch ofthings extra that you could use butthat's not for this tutorial if you wantto know moreabout how you can do more advancedthings here there will be other adorabletutorials that dive deeper anywaysthat's it thank you very much forwatching and i'll see you in the nexttutorial cheers
Learn how to query an internal Nuxt API route from your front end using useFetch
In this tutorial, you learn how to query an internal Nuxt server route from your front end using `useFetch()`.
Features you will use:
Nuxt 3 server routes
Learn how to query an external API and how to implement "read more" functionality.
Learn how to pick and transform data coming back from an API call in Nuxt 3
Learn how easy it is to add rich schema.org data to your Nuxt 3 application