Skip to main content

← All videos

Turbo Tutorial | Nuxt 3: Query from an internal Nuxt API route

October 31, 2022
Tim BenniksAPI designCloud & infraFrontend

Learn how to query an internal Nuxt API route from your front end using useFetch().

Find the code for this tutorial here: https://github.com/Turbo-Tutorials/nuxt3-query-from-api-route Visit https://turbo-tutorials.dev/tutorials/nuxt-3-how-to-query-from-a-nuxt-api-route/ for more info.

Browse more tutorials here: https://turbo-tutorials.dev

Transcript

my name is tim benix and this is a turbo tutorial so in this quick tutorial we will be looking at how you can create internal api routes in next three and show whatever data comes out of these on the screen and actually it's not that complicated because next three has a bunch of convenience methods built in and we'll be using these today so it won't be super advanced we'll just go over the basics and you'll see how easy it is so let's go into the laptop here i'll show you my vs code and my browser and all the things we need anyways we're in the browser here now and as you can see this is a very clean setup of a just new nox project there's not even anything in the config so in my app.view i am querying the api friends api route that i made by using use fetch and you can see there's an await here and it's in a script setup tag and because of this there's top level awaits so you don't have to do complicated things it just works like this and then we bind the data that comes from that to the friends property and then we show that on the browser so let's go there and basically this is what it shows and if you don't know friends just yet you're probably a bunch younger than me so go to netflix and watch it you'll love it anyways so how i've done this you can actually make a server folder then an api folder and put friends inside and so now it will if you query api friends whatever is returned here will be whatever comes out of that endpoint in json which is super easy and super convenient and so right now these are just two lines of a friends episode that's quite iconic and so i'm literally returning something here what you can also do is an api call with fetch or something else to a third-party script or a third-party data source and then return that here that just works for me now i just type this in because why not keep it simple right and so this is the simplest way you can do that there are other options here you have something called use lazy fetch or use async data there's a whole bunch of things extra that you could use but that's not for this tutorial if you want to know more about how you can do more advanced things here there will be other adorable tutorials that dive deeper anyways that's it thank you very much for watching and i'll see you in the next tutorial cheers [Music]