The asyncData Method

You may want to fetch data and render it on the server-side. Nuxt.js add an asyncData method let you handle async operation before setting the component data.

  • Type: Function

asyncData is called every time before loading the component (only for pages components). It can be called from the server-side or before navigating to the corresponding route. 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' }
  }
}
You do NOT have access of the component instance through this inside data because it is called before initiating the component.

Context

List of all the available keys in context:

KeyTypeAvailableDescription
isClientBooleanClient & ServerBoolean to let you know if you're actually renderer from the client-side
isServerBooleanClient & ServerBoolean to let you know if you're actually renderer from the server-side
isDevBooleanClient & ServerBoolean to let you know if you're in dev mode, can be useful for caching some data in production
routevue-router routeClient & Servervue-router route instance.
storevuex storeClient & ServerVuex.Store instance. Available only if the vuex store is set.
envObjectClient & ServerEnvironment variables set in nuxt.config.js, see env api
paramsObjectClient & ServerAlias of route.params
queryObjectClient & ServerAlias of route.query
reqhttp.RequestServerRequest from the node.js server. If nuxt is used as a middleware, the req object might be different depending of the framework you're using. Not available via nuxt generate.
reshttp.ResponseServerResponse from the node.js server. If nuxt is used as a middleware, the res object might be different depending of the framework you're using. Not available via nuxt generate.
redirectFunctionClient & ServerUse this method to redirect the user to another route, the status code is used on the server-side, default to 302. redirect([status,] path [, query])
errorFunctionClient & ServerUse this method to show the error page: error(params). The params should have the fields statusCode and message.

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!