You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/vue/README.md
+5-225Lines changed: 5 additions & 225 deletions
Original file line number
Diff line number
Diff line change
@@ -8,239 +8,19 @@ Declarative subscriptions and meteor reactive data (subscriptions, collections,
8
8
9
9
## Installation
10
10
11
-
12
-
meteor add akryum:vue
13
-
14
-
## Usage
15
-
16
-
In your Vue component, add a `meteor` object :
17
-
18
-
19
-
```javascript
20
-
newVue({
21
-
meteor: {
22
-
// Meteor specific options
23
-
}
24
-
});
25
-
```
26
-
27
-
28
-
#### Subscriptions
29
-
30
-
Add an object for each subscription in a `subscribe` object. The object key is the name of the publication and the value is either an array of parameters or a function returning an array of parameters. These subscription will be stopped when the component is destroyed.
31
-
32
-
```javascript
33
-
meteor: {
34
-
// Subscriptions
35
-
subscribe: {
36
-
// Subscribes to the 'threads' publication with no parameters
37
-
'threads': [],
38
-
// Subscribes to the 'threads' publication with static parameters
39
-
'threads': ['new', 10], // The 10 newest threads
40
-
// Subscribes to the 'posts' publication with dynamic parameters
41
-
// The subscription will be re-called when a vue reactive property changes
You can also use the `$subscribe(name, ...params)` method in you component code:
52
-
53
-
54
-
```javascript
55
-
ready () {
56
-
// Subscribes to the 'threads' publication with two parameters
57
-
this.$subscribe('thread', 'new', 10);
58
-
}
12
+
meteor add akryum:vue
59
13
```
60
14
61
-
The `$subReady` object on your component contains the state of your subscriptions. For example, to know if the 'thread' subscription is ready, use this *reactive* expression:
15
+
This will also update your `package.json` to include `vue`. If you want to use Vue 2.x, install it manually:
62
16
63
-
```javascript
64
-
console.log(this.$subReady.thread);
65
17
```
66
-
67
-
Or in your template:
68
-
69
-
```html
70
-
<divv-if="!$subReady.thread">Loading...</div>
71
-
```
72
-
73
-
You can also change the default subscription method by defining the `Vue.config.meteor.subscribe` function:
74
-
75
-
76
-
```javascript
77
-
// You can replace the default subcription function with your own
78
-
// Here we replace the native subscribe() with a cached one
79
-
// with the ccorcos:subs-cache package
80
-
constsubsCache=newSubsCache({
81
-
expireAfter:15,
82
-
cacheLimit:-1
83
-
});
84
-
85
-
Vue.config.meteor.subscribe=function(...args) {
86
-
returnsubsCache.subscribe(...args);
87
-
};
18
+
meteor npm install --save vue@^2.0.3
88
19
```
89
20
90
-
#### Reactive data
91
-
92
-
You can make your component `data` properties update from any Meteor reactive sources (like collections or session) by putting an object for each property in the `data` object. The object key is the name of the property, and the value is either a function or an object with the following attributes:
93
-
94
-
-`params()` (optional), a function returning an object, which can use any *Vue* reactive property,
95
-
-`update([params])`, a function with optional `params` argument, that returns the value to update the corresponding `data` property of the component. Here you can use *Meteor* reactive sources, but **no Vue reactive property getters**. The `params` argument is the object returned by the `params()` function described above.
96
-
97
-
Here is an example:
98
-
99
-
```javascript
100
-
newVue({
101
-
data() {
102
-
return {
103
-
selectedThreadId:null,
104
-
// We can init the property value in the data() component hook
105
-
threads: [],
106
-
selectedThread:null
107
-
};
108
-
},
109
-
meteor: {
110
-
// Subscriptions
111
-
subscribe: {
112
-
// We subscribe to the 'threads' publication
113
-
'threads': []
114
-
},
115
-
data: {
116
-
// Threads list
117
-
// This will update the 'threads' array property on the Vue instance
118
-
// that we set in the data() hook earlier
119
-
// You can use a function directly if you don't need
120
-
// parameters coming from the Vue instance
121
-
threads () {
122
-
// Here you can use Meteor reactive sources
123
-
// like cursors or reactive vars
124
-
// as you would in a Blaze template helper
125
-
// However, Vue reactive properties will not update
126
-
returnThreads.find({}, {
127
-
sort: {date:-1}
128
-
});
129
-
},
130
-
// Selected thread
131
-
// This will update the 'selectedThread' object property on component
132
-
selectedThread: {
133
-
//// Vue Reactivity
134
-
// We declare which params depends on reactive vue properties
135
-
params () {
136
-
// Here you can use Vue reactive properties
137
-
// Don't use Meteor reactive sources!
138
-
return {
139
-
id:this.selectedThreadId
140
-
};
141
-
},
142
-
//// Meteor Reactivity
143
-
// This will be refresh each time above params changes from Vue
144
-
// Then it calls Tracker.autorun() to refresh the result
145
-
// each time a Meteor reactive source changes
146
-
update ({id}) {
147
-
// Here you can use Meteor reactive sources
148
-
// like cursors or reactive vars
149
-
// Don't use Vue reactive properties!
150
-
returnThreads.findOne(id);
151
-
},
152
-
},
153
-
},
154
-
},
155
-
});
156
-
```
157
-
158
-
You can skip the data initialization (the default value will be `null`) and the `data` property (as long as none of your meteor props is named 'data'):
159
-
160
-
```javascript
161
-
newVue({
162
-
data() {
163
-
return {
164
-
selectedThreadId:null,
165
-
};
166
-
},
167
-
meteor: {
168
-
// Subscriptions
169
-
subscribe: {
170
-
// We subscribe to the 'threads' publication
171
-
'threads': []
172
-
},
173
-
// Threads list
174
-
// This will update the 'threads' array property on the Vue instance
175
-
// that we set in the data() hook earlier
176
-
// You can use a function directly if you don't need
177
-
// parameters coming from the Vue instance
178
-
threads () {
179
-
// Here you can use Meteor reactive sources
180
-
// like cursors or reactive vars
181
-
// as you would in a Blaze template helper
182
-
// However, Vue reactive properties will not update
183
-
returnThreads.find({}, {
184
-
sort: {date:-1}
185
-
});
186
-
},
187
-
// Selected thread
188
-
// This will update the 'selectedThread' object property on component
189
-
selectedThread: {
190
-
//// Vue Reactivity
191
-
// We declare which params depends on reactive vue properties
192
-
params () {
193
-
// Here you can use Vue reactive properties
194
-
// Don't use Meteor reactive sources!
195
-
return {
196
-
id:this.selectedThreadId
197
-
};
198
-
},
199
-
//// Meteor Reactivity
200
-
// This will be refresh each time above params changes from Vue
201
-
// Then it calls Tracker.autorun() to refresh the result
202
-
// each time a Meteor reactive source changes
203
-
update ({id}) {
204
-
// Here you can use Meteor reactive sources
205
-
// like cursors or reactive vars
206
-
// Don't use Vue reactive properties!
207
-
returnThreads.findOne(id);
208
-
},
209
-
},
210
-
},
211
-
});
212
-
```
213
-
214
-
You can then use the reactive data in the template since it's standard Vue component properties:
215
-
216
-
217
-
```html
218
-
<!-- Thread list -->
219
-
<thread-itemv-for="thread in threads":data="thread":selected="thread._id === selectedThreadId"@select="selectThread(thread._id)"></thread-item>
This option will apply `Object.freeze` on the Meteor data to prevent Vue from setting up reactivity on it. This can improve the performance of Vue when rendering large collection lists for example. By default, this option is turned off.
21
+
## Usage
239
22
240
-
```javascript
241
-
// Disable Vue reactivity on Meteor data
242
-
Vue.config.meteor.freeze=true;
243
-
```
23
+
See [vue-meteor-tracker](https://github.com/Akryum/vue-meteor-tracker#usage) documentation.
0 commit comments