mirror of https://github.com/nuxt/nuxt.git synced 2025-01-31 15:50:32 +00:00

History

Sébastien Chopin 9ebbb14eab Version 0.2.0 - Add README for examples vuex-store, async-data and global-css - Add examples/global-css/ - Feature: we can now use nuxt.config.js to add global css files and modules - Fix: show webpack error of compilation		2016-11-07 23:26:53 +01:00
..
pages	Loading component done	2016-11-07 19:21:32 +01:00
nuxt.config.js	Loading component done	2016-11-07 19:21:32 +01:00
package.json	Add async-data example + add module resolver in webpack	2016-11-07 13:53:05 +01:00
README.md	Version 0.2.0	2016-11-07 23:26:53 +01:00

README.md

Async data with Nuxt.js

data(context)

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

data is called every time before loading the component (only if attached to a route). It can be called from the server-side or before navigating to the corresponding route.

The data method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, return a Promise, nuxt.js will wait for the promise to be resolved before rendering the Component.

For example:

export default {
  data ({ params }) {
    return axios.get(`http://my-api/posts/${params.id}`)
    .then((res) => {
      return { title: res.data.title }
    })
  }
}

And then, you can display the data inside your template:

<template>
  <h1>{{ title }}</h1>
</template>

Demo

npm install
npm start

Go to http://localhost:3000 and navigate inside the app.