Getting Started with Nuxt 3
This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Get started
Already a member? Sign in to continue
Playing
09. Fetching data

Episodes

0%
Your progress
  • Total: 1h 15m
  • Played: 0m
  • Remaining: 1h 15m
Join or sign in to track your progress

Transcript

00:00
Over the next few episodes, we're
00:01
going to look at data fetching, e.g. making a request to an external API, getting back the results, and doing something with them, which is probably what you're going
00:10
to be doing in your apps anyway. Now for this, we're going to go ahead and use JSON placeholder, which is just going to provide us a fake API for testing. And we're going to go ahead and grab a list of to-dos.
00:23
So let's head down to the section just here. And you can see that we've got a URL for to-dos. We can also access individual to-dos as well. So we can pretty much put together
00:34
an app that looks like we are listing some to-dos, clicking through, and seeing a particular to-do. So I'm going to go ahead and grab this URL here. And on this page here, where we're
00:45
faking going through to a particular to-do ID, we're actually going to now make an API request. So let's go ahead and define our script section. Again, we're going to have this as a script setup type.
00:58
And let's make a request. Now there's a couple of different variations of this. We can either use useAsyncData, or we can use useFetch. We'll take a look at the difference between them
01:11
in a moment. So the first thing we're going to do is use useAsyncData. Now with this, what we want to do is a weight on this. And here we're using a top level weight
01:22
inside of script setup. Now by making a request to this, this will actually use suspense, which is a view three feature. So it will block the page loading
01:34
until this has been made. And over the next couple of parts, we're going to look at some of the options that we can pass through to useAsyncData just
01:44
to make the experience a little bit better, depending on how you're requesting the data and what you need to do with it. OK, so how do we use useAsyncData?
01:54
Well, this is a function. And the first argument for this is going to be a key so Nuxt can differentiate between the request that we're making.
02:01
So we're going to just call this to do's. You could call this literally anything you like. But to do's kind of makes sense because it's going to be an index of to do's.
02:11
Now the second argument to this is going to be a closure. And we're going to use fetch and then pass this URL into here that we just grabbed from JSON placeholder. So we're making a fetch request inside of this closure here.
02:25
And the key for this is to do's. It's pretty much as simple as it gets for now. If we head over and give this a refresh, notice that nothing is really happening.
02:33
But in the background, we are making a request to JSON placeholder to grab that data back. Question is, how do we extract this from here? Well, we can just easily destructure this.
02:44
You could go ahead and assign this to a variable, which you could use inside of your template. Let's see what happens when we do that. So let's go ahead and output data and just
02:54
see what we get on the page. So you can see here that we do actually have an object back here with a data key. And that contains all of that information that we need.
03:04
And behind the scenes, like I said, this is using suspense within view three. So let's go ahead and destructure this so we can use it properly and neatly.
03:13
So we're going to go ahead and alias data to to do's. And that means that we can just dump the to do's on the page, which is effectively what's contained within that data.
03:23
If we give this a refresh, there we go. We now have an array of all of them to do objects. So that is as simple as it is to make a request synchronously within NUX 3.
03:35
So we're going to go ahead and iterate over all of them to do's and output a NUX link for each one. So let's create our div out in here and let's use V4 like we normally would in view.
03:47
And let's say to do in to do's. And let's go ahead and key this really importantly by the to do ID, which does exist within here. So let's say to do and ID.
03:58
And let's grab this link that we commented out and pop that just inside of here. So let's go and give this a refresh. And there we go.
04:05
We now have a list of all of our to do's from that URL. Really, really simple to make a request to an API and get the results back. Now, of course, in here, what we want to do
04:15
is output the relevant information. So we can just do that as we normally would. To do and name or title. Let's go over.
04:23
There we go. And of course, now what we can do is we can link up the ID within that page that we created earlier.
04:30
So we can just pass the to do ID directly into there. So let's go ahead and click on the first one. And that goes through to do's one, two, three, and so on and so forth.
04:42
So we've now made a request and we can now link through. Great. So we're going to dive into some of the options we can pass through to use async data later.
04:51
But there's a slight variation to this if you didn't necessarily want to explicitly set a key and you don't mind Nuxt doing that for you. So let's go ahead and just comment this out
05:02
and look at another variation of making a request, which is actually much shorter. So this is using useFetch, like I mentioned earlier. It works in exactly the same way,
05:11
but all we need to do is pass through the URL. Nuxt will automatically generate a key for you and you'll just get the data back in the same way. So let's just do this in order.
05:22
We want to go ahead and grab data, call it to do's, and we're doing that by awaiting on useFetch. And we're just going to pass the URL that we want to make a request to,
05:31
which is this one just here. So we don't need to define out this callback. We don't need to useFetch explicitly. We just pass the URL in.
05:39
So if you just wanted to make a request through to a URL, you didn't really care about naming this. You would use useFetch. Let's go over, give that a refresh,
05:47
and you can see this works in exactly the same way. Okay, let's head over to the next couple of parts and see some of the options that we can pass through when we are making requests like this.

Episode summary

In this episode, we're diving into how to fetch data in a Nuxt 3 app. We start by introducing the concept of data fetching in web apps—like making requests to external APIs to get the information that powers your apps. We'll use JSON Placeholder, a handy fake API, to grab a list of to-dos for our demo.

First, we walk through using useAsyncData to fetch the to-dos. You'll see how to set it up with a key, make the API call using fetch inside a closure, and return the data you need. We explain how this takes advantage of Vue 3's suspense feature, which can block page loading until the data comes back, giving users a smoother experience. Once the data is fetched, we destructure it to get just the info we want—like an array of to-do objects—and render them in a list. We even add NuxtLinks for each to-do so you can click through and see more details about each one.

There's also a quick look at an alternative: using useFetch, which lets you make a request with even less setup (no need to manually define a key or callback). We show you how both methods work, and the page displays your list of to-dos either way.

Throughout, you'll pick up the basics of displaying remote data in your UI, and set yourself up for deeper dives into customizing data fetching (which we'll cover soon!).

Episode discussion

No comments, yet. Be the first!