Jamstack Explorers

Get Started with Nuxt with Debbie O'Brien

Nuxt Data Fetching

In the last lesson we had a sneak peak at using asyncData to get data from our API. In Nuxt there are two ways to get data. Let's take a look at the differences between fetching data using the async data hook and using the fetch Hook. They're pretty much very similar. The main difference is that async data is called before the page is loaded so we don't have access to this and we don't need to define the data property as it gets merged with our data.

Whereas when using the fetch hook, it gets called after the page is loaded.

Let's add a list of our planets to the index page using the fetch hook.

As Fetch is called after the page is created we need to define our data and then assign that data to the result of our fetch. Let's add an empty array for our planets and then we can use this to merge the results form our api to our data.

Let's use a pre tag with $data to see what data is being returned.

As you can see in our browser we are getting a list of our planets.

What we want is the title and the slug. We can use a v-for to loop over all our planets and print out the title and use the NuxtLink to link to the slug of our planets. We can also use the slug as our key.

lets quickly fix some styling so the list displays correctly

Ok in our browser Let's take a look at our list of planets. Amazing

You may notice that we are getting a sort of flash as the list of planets load. emm not really liking that. But as we are using fetch we can set the fetch state so that if it is pending we can add a loading message before the actual content gets loaded.

ok cool. Our internet connection is pretty good so we only see that loading message very briefly but if we had a really slow internet connection that loading message would be invaluable.

Using the fetch hook we can also check if there is an error and print out a message to our users.

Obviously on this mission there is no room for errors. But we can fake an error just to show you.

Lets remove our api url so we have no data to fetch

And there you have it our page loads but with our error message of "error while fetching planets".

While we are on the subject of errors. Let's investigate a little further. I think it's pretty important that our users see the home page and if there are no planets they just get a message. But what if one planet didn't exist. Wouldn't it be great to show a 404 page.

Let's put back our Api url so we get no error. This time let's add a fake planet to our list of planets. Let's call it the nuxt planet.

Clicking on that gives us an empty page. It seems our mission failed and nobody from mission control told us about it. Not good.

If we inspect our Nuxt page we can see that it renders with an empty image and title. The page is rendering but as there is no planet Nuxt it gives us a page with no data. What we want is to tell our fetch hook that if the response is not ok to just throw an error. That way our error page can pick it up.

To do that we first check if the response is ok and if it is we return it. If not we through a new Error with the status code.

OK we are one step closer. We are getting an error page but it's not really very friendly. Let's create a nicer one. But how do we create an error page?

Well we can do so by adding an error.vue file to the layouts directory. Yes you heard right, the layouts directory. Let's create one.

This is just a simple page with some basic styling and a link back to the home page

Now if we click on the Nuxt planet we will see our amazing error page. Perfect.

Speaking of layouts. Let's take a look at what layouts are. In our layouts folder we have a default layout. The <Nuxt> component is our page component so anything in our page will be placed here. Let's move the NuxtLinks from the index and about page into our layout. We can wrap these in a nav tag and add some styling so its centered.

Now you can see we have a nav bar in all our pages even in our planets. Layouts are a great help when you want to change the look and feel of your Nuxt.js app. Whether you want to include a navbar, a sidebar or have distinct layouts for mobile and desktop. If we wanted to have a different layout for our home page we can just create a new layout let's call it home. Let's add the nav bar to the bottom of the page instead of the top.

Then in our index page we add the layout property with the value of home.

And in our browser you will see we now have a different layout for our home page. Nice

In the next lesson we'll take a look at search engine optimization.


your progress