Vue.js 2 Design Patterns and Best Practices

asyncData

We can use the asyncData method to resolve data for our component before the component is loaded, essentially requesting data on the server side and then merging the results with the data object inside our component instance when loaded. This makes it a great place to add asynchronous actions, such as getting data from a REST API.

We'll use the axios library to create HTTP requests, so we'll need to ensure that we've installed it. Run the following from your Terminal:

$ npm install axios

Then, inside pages/index.vue, we will get a list of categories to show the user when our application starts. Let's do that inside asyncData:

import axios from 'axios'export default {  asyncData ({ req, params }) { return axios.get(`http://localhost:3001/categories`) ...