vue-async-data

vue-async-data

Async data loading plugin for Vue.js

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:

<div v-if="$loadingAsyncData">Loading...</div>
<div v-if="!$loadingAsyncData">Loaded. Put your real content here.</div>

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:

<example wait-for="async-data"></example>