Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 983 of the free egghead.io lessons, plus get Vue.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Preload Data using Promises with Vue.js and Nuxt.js

2:23 Vue.js lesson by

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Nuxt.js allows you to return a Promise from your data function so that you can asynchronously resolve data before displaying the page. This allows the server to fetch the data and render the page once it's ready.

In the next project with Vue, you can actually return a Promise. I'll just resolve this with an object of message, "I'm a promise." This will allow us to asynchronously resolve this data. You see now that this was server rendered, and this data has arrived asynchronously, because this Promise just resolved automatically.

Because we can do that with a Promise, we can use libraries that return promises when they make get requests. For example, I'll add axios to my project.

Yarn add axios so that will install that, which means I can import axios from "axios" now, and then return, instead of Promise.resolve, I can return an axios.get.

To set up some data to get, I''m going to use now to launch a server using a project on GitHub called johnlindquist/swapi-json-server. This will find this project on GitHub and launch it, and you'll see it living here when I paste this on the url, and this will give me a bunch of Star Wars data.

At people or /people after this long url, I'll have an array of people I can load. I'll copy all of this, and I'll just call this my api, paste it in there, and I'll say axios.get(api). Now, axios is going to give me a response back, which I want to take the data off of.

I want the data to be on a people property on my data object. This Vue component has a data function which is returning this promise, and then the response from axios.get also has a different data property on it, which I'm going to assign to people which lives on this object which represents the data we can render inside of our template.

To show that I'll create an ordered list with list elements and then loop through this people, I'll say, "person in people", and show, {{person.name}}.

When I hit save here, go back to my project, you'll see all of the names appear after they've been server rendered.

You can see from the Network tab when I refresh, there's no request to /people or the server to load this data from the client's side. It's done on the server. If I navigate away and navigate back, then, you'll see that request to people being made.

For this initial render, it's making this request out using a server, and then any time after that, it will make the request using a client.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?