vue-async-data
Async data loading plugin for Vue.js
Install
npm install vue-async-data
Usage
// assuming CommonJSvar Vue =var VueAsyncData =// use globally// you can also just use `VueAsyncData.mixin` where neededVue
Then, in your component options, provide an asyncData
function:
Vue
Promise
You can also return a promise that resolves to the data to be set (plays well with vue-resource):
Vue
Parallel fetching with Promise.all
and ES6:
Vue
Reloading Data
The component also gets a method named reloadAsyncData
, which obviously reloads the data:
Vue
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: