Turbo Tutorial | Nuxt 3: Query from an internal Nuxt API route
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]
Related videos

Transforming DevRel with AI: Doorbell DevRel Explained
The Doorbell #devrel is an AI-driven content creation project that generates lifelike, unscripted developer marketing videos using minimal code and cutting-edge tools like @heygen_official, @elevenlabsio, @Contentstack,…

Tim Benniks - Automate all the things. AI, Nuxt, Countentstack, Clouidinary, and more.
In this talk, Tim explains how a joke experiment recording developer videos on a Ring doorbell turned into a serious exploration of low-effort, high-impact content, and how making something feel authentic and messy is…

Traditional Developer Relations died in 2024
Yep, you heard that right: traditional Developer Relations as a job title died in 2024.