├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── example
├── example.build.js
├── example.html
└── example.js
├── package.json
└── vue-async-data.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .DS_Store
3 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-2016 Evan You
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # THIS REPOSITORY IS DEPRECATED
2 |
3 | ## vue-async-data
4 |
5 | > Async data loading plugin for Vue.js
6 |
7 | **NOTE:**
8 |
9 | - Does not work with Vue 2.0.
10 |
11 | - You don't need this if you are using [vue-router](https://github.com/vuejs/vue-router). Use vue-router's [`route.data` hook](http://router.vuejs.org/en/pipeline/data.html) instead.
12 |
13 | ### Install
14 |
15 | ``` bash
16 | npm install vue-async-data
17 | ```
18 |
19 | ### Usage
20 |
21 | ``` js
22 | // assuming CommonJS
23 | var Vue = require('vue')
24 | var VueAsyncData = require('vue-async-data')
25 |
26 | // use globally
27 | // you can also just use `VueAsyncData.mixin` where needed
28 | Vue.use(VueAsyncData)
29 | ```
30 |
31 | Then, in your component options, provide an `asyncData` function:
32 |
33 | ``` js
34 | Vue.component('example', {
35 | data: function {
36 | return {
37 | msg: 'not loaded yet...'
38 | }
39 | },
40 | asyncData: function (resolve, reject) {
41 | // load data and call resolve(data)
42 | // or call reject(reason) if something goes wrong
43 | setTimeout(function () {
44 | // this will call `vm.$set('msg', 'hi')` for you
45 | resolve({
46 | msg: 'hi'
47 | })
48 | }, 1000)
49 | }
50 | })
51 | ```
52 |
53 | #### Promise
54 |
55 | You can also return a promise that resolves to the data to be set (plays well with [vue-resource](https://github.com/vuejs/vue-resource)):
56 |
57 | ``` js
58 | Vue.component('example', {
59 | // ...
60 | asyncData: function () {
61 | var self = this
62 | return someServiceThatReturnsPromise.get(12345)
63 | .then(function (msg) {
64 | // returning this as the Promise's resolve value
65 | // will call `vm.$set('msg', msg)` for you
66 | return {
67 | msg: msg
68 | }
69 | // or, set it yourself:
70 | // self.msg = msg
71 | })
72 | }
73 | })
74 | ```
75 |
76 | Parallel fetching with `Promise.all` and ES6:
77 |
78 | ``` js
79 | Vue.component('example', {
80 | // ...
81 | asyncData() {
82 | return Promise.all([
83 | serviceA.get(123),
84 | serviceB.get(234)
85 | ]).then(([a, b]) => ({a, b}))
86 | }
87 | })
88 | ```
89 |
90 | #### Reloading Data
91 |
92 | The component also gets a method named `reloadAsyncData`, which obviously reloads the data:
93 |
94 | ``` js
95 | Vue.component('example', {
96 | // ...
97 | asyncData() {
98 | // load data based on `this.params`
99 | },
100 | // reload when params change
101 | watch: {
102 | params: 'reloadAsyncData'
103 | }
104 | })
105 | ```
106 |
107 | #### Loading State
108 |
109 | Your component automatically gets a `$loadingAsyncData` meta property, which allows you to display a loading state before the data is loaded:
110 |
111 | ``` html
112 |
Loading...
113 |
Loaded. Put your real content here.
114 | ```
115 |
116 | 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:
117 |
118 | ``` html
119 |
120 | ```
121 |
122 | ### License
123 |
124 | [MIT](http://opensource.org/licenses/MIT)
125 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "vue-async-data",
3 | "description": "async data loading plugin for Vue.js",
4 | "main": "vue-async-data.js",
5 | "authors": [
6 | "Evan"
7 | ],
8 | "license": "MIT",
9 | "keywords": [
10 | "vue"
11 | ],
12 | "homepage": "https://github.com/vuejs/vue-async-data",
13 | "ignore": [
14 | "**/.*",
15 | "node_modules",
16 | "bower_components",
17 | "test",
18 | "tests"
19 | ]
20 | }
21 |
--------------------------------------------------------------------------------
/example/example.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |