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.

https://app.egghead.io/api/v1/lessons/vue-preload-data-using-promises-with-vue-js-and-nuxt-js/subtitles

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

[00:00] 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.

[00:23] 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.

[00:32] 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.

[00:45] 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.

[01:03] 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.

[01:21] 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.

[01:43] 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}}.

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

[02:00] 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.

[02:17] 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.

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

Share this video with your friends