Want to take a look at our new docs? Our new docs are now in beta. Have fun!

The asyncData Method

You may want to fetch data and render it on the server-side. Nuxt.js adds an asyncData method that lets you handle async operations before setting the component data.

  • Type: Function

Info: Please visit the async data guide as well!

asyncData is called every time before loading the page component and is only available for such. It will be called server-side once (on the first request to the Nuxt app) and client-side when navigating to further routes. This method receives the context object as the first argument, you can use it to fetch some data and return the component data.

The result from asyncData will be merged with data.

export default {
  data() {
    return { project: 'default' }
  asyncData(context) {
    return { project: 'nuxt' }

Warning: You don't have access to the component instance through this inside asyncData because it is called before initiating the component.


Contribution for this page is now closed. If you would like to contribute please check out our new docs are now in beta. Have fun!

Platinum Sponsors

StoryblokMoovweb Support Us