Need help with vue-async-data?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

vuejs
418 Stars 38 Forks MIT License 15 Commits 11 Opened issues

Description

Async data loading plugin

Services available

!
?

Need anything else?

Contributors list

No Data

THIS REPOSITORY IS DEPRECATED

vue-async-data

Async data loading plugin for Vue.js

NOTE:

Install

npm install vue-async-data

Usage

// assuming CommonJS
var Vue = require('vue')
var VueAsyncData = require('vue-async-data')

// use globally // you can also just use VueAsyncData.mixin where needed Vue.use(VueAsyncData)

Then, in your component options, provide an

asyncData
function:
Vue.component('example', {
  data: function {
    return {
      msg: 'not loaded yet...'
    }
  },
  asyncData: function (resolve, reject) {
    // load data and call resolve(data)
    // or call reject(reason) if something goes wrong
    setTimeout(function () {
      // this will call `vm.$set('msg', 'hi')` for you
      resolve({
        msg: 'hi'
      })
    }, 1000)
  }
})

Promise

You can also return a promise that resolves to the data to be set (plays well with vue-resource):

Vue.component('example', {
  // ...
  asyncData: function () {
    var self = this
    return someServiceThatReturnsPromise.get(12345)
      .then(function (msg) {
        // returning this as the Promise's resolve value
        // will call `vm.$set('msg', msg)` for you
        return {
          msg: msg
        }
        // or, set it yourself:
        // self.msg = msg
      })
  }
})

Parallel fetching with

Promise.all
and ES6:
Vue.component('example', {
  // ...
  asyncData() {
    return Promise.all([
      serviceA.get(123),
      serviceB.get(234)
    ]).then(([a, b]) => ({a, b}))
  }
})

Reloading Data

The component also gets a method named

reloadAsyncData
, which obviously reloads the data:
Vue.component('example', {
  // ...
  asyncData() {
    // load data based on `this.params`
  },
  // reload when params change
  watch: {
    params: 'reloadAsyncData'
  }
})

Loading State

Your component automatically gets a

$loadingAsyncData
meta property, which allows you to display a loading state before the data is loaded:
Loading...
Loaded. Put your real content here.

Or, if you prefer to wait until data loaded to display the component, you can use

wait-for
to listen for the
async-data
event, which is automatically emitted when the data is loaded:

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.