- [Instructor] In Nuxt, you can fetch data
from external sources into your applications,
using a concept called data fetching.
It involves you sending HTTP requests
to an API source
using one of the Nuxt data fetching methods
and a data fetching module,
like the HTTP or Axios module.
Nuxt has two hooks for loading data asynchronously.
The asyncData hook and the fetch hook.
Now, each of them has its own use case,
and in the next lessons we'll cover what each hook is
and how it works.
First, we have the asyncData hook.
I'll be using the Nuxt life circle diagram
to explain how the asyncData hook works under the hood.
The asyncData hook is only available
on page level components
and it is called before loading the page.
Therefore, there is no visible loading placeholder
during client side rendering.
Instead, the hook will block routes navigation
until it fully loads the page.
Or, until the page displays an error.
The component instance cannot be assessed
in the asyncData hook.
And this is one of the differences you get
between using asyncData and using the fetch hook.
Data returned from the async function
is merged into the components local states.
So, there is no need to define a data property.
Let's see an example of how to use asyncData
in a page component.
Here in our code editor,
I would head over to the pages directory
and open the index.vue file.
Before we start writing code here,
I also want to call out that
I've gone ahead to install the HTTP module.
This is the module we'll use to fetch data.
If you want to also do that,
you need to run the command npm install, nuxt http.
And in your nuxt.config.js file,
where we have the modules property also included there.
So, you register it globally.
I already gone ahead to do that.
So, we'll just move back to the index.vue page.
Inside the script section of this page,
I'll create a new async function.
I'll call this function "asyncData".
And in here, passing the HTTP module.
We pass it in here so that we have access
to it inside the function.
For this example,
I'm going to be fetching data
from an example data source from Nuxt.
This endpoint returns a list of rivers
including the tie to, the location
and other data that we can use to display on our page.
Now, I'll create a new response
and in here pass in an "await"
and call the HTTP gets method.
And copy out this endpoint and pass it in
as the URL we'll like to fetch, right?
Now, if I try to console this response that we have here,
just to check that we actually have the data
coming from the end point.
And I head over to the browser, inspect the console.
I should actually see some data returned.
Great!
Now, what we actually need to do
is instead of console logging the response,
we actually want to return it.
So instead, I'll create a return here
and create an object.
I want to return an object that has,
like a rivers key, and then pass in the response.
Now, what we get is actually different.
If I refresh this page, we no longer have that console.
But, if we head over to the vue devtools
and inspects this index page,
we'll now see that we have an array of rivers.
Now, the next step in this example
would be to display the rivers in this page.
So, heading back to the editor.
In the template section,
I will remove the "Hello World!" text we have there
and instead create a div.
Inside this div, I'll include another heading
and call this "Most Popular Rivers In the World!".
Now, I would like to loop over the data that we are getting.
So, I'll go ahead and create a list.
And inside this lists,
create a "v-for" that loops over rivers.
So, we'll say "river in rivers".
We always need to pass in a key when we are using "v-for".
So for the key, I would call it "river-index".
And, the index that I would like to use
is the index of each item in the area.
So, here I'll put that as "river, index",
and concatenate the strings.
So, I'll say here, river index.
Great!
Now that we have this,
the next step would be to actually include the lists
of rivers.
So, just the title is something
that I want to add to my list.
So, I'll say "river.title".
Great, now if I head back to the browser,
refresh this page,
we now have a list of rivers
and we are only returning the title.
So, that's what we currently see on the browser.
So, that's how you go about using the asyncData hook.