The data Method

Nuxt.js supercharges the data method from vue.js to let you handle async operation before setting the component data.

data 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 as the first argument, you can use it to fetch some data and return the component data.

export default {
  data (context) {
    return { foo: 'bar' }
  }
}
You do NOT have access of the component instance trough 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 store: true is set in nuxt.config.js
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!