The asyncData method is the most important function in a page component. Nuxt always calls this function before initiating the page component. That means every time you request a page, this function is called first before the page is rendered. It gets the Nuxt context as the first argument and it can be used asynchronously, as follows:
<h1>{{ title }}</h1>
export default {
async asyncData ({ params }) {
let { data } = await axios.get(
'https://jsonplaceholder.typicode.com/posts/' + params.id)
return { title: data.title }
}
}
In this example, we use the ES6 destructuring assignment syntax to unpack the properties packed in the Nuxt context, and this particular property is params. In other words,
{ params } is shorthand for context.params. We also can use the destructuring assignment syntax to unpack the data property in the async result from axios. Note that if you have data set in the data function in your page component, it will always...
