Skip to content

Commit 29c5618

Browse files
committed
Compatibility with vue-ssr
1 parent 64799c4 commit 29c5618

File tree

3 files changed

+172
-134
lines changed

3 files changed

+172
-134
lines changed

README.md

Lines changed: 42 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -40,12 +40,12 @@ new Vue({
4040

4141
#### Subscriptions
4242

43-
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.
43+
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.
4444

4545
```javascript
4646
meteor: {
4747
// Subscriptions
48-
subscribe: {
48+
$subscribe: {
4949
// Subscribes to the 'threads' publication with no parameters
5050
'threads': [],
5151
// Subscribes to the 'threads' publication with static parameters
@@ -102,7 +102,7 @@ Vue.config.meteor.subscribe = function(...args) {
102102

103103
#### Reactive data
104104

105-
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:
105+
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 `meteor` object. The object key is the name of the property (it shouldn't start with `$`), and the value is either a function or an object with the following attributes:
106106

107107
- `params()` (optional), a function returning an object, which can use any *Vue* reactive property,
108108
- `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.
@@ -121,57 +121,55 @@ new Vue({
121121
},
122122
meteor: {
123123
// Subscriptions
124-
subscribe: {
124+
$subscribe: {
125125
// We subscribe to the 'threads' publication
126126
'threads': []
127127
},
128-
data: {
129-
// Threads list
130-
// This will update the 'threads' array property on the Vue instance
131-
// that we set in the data() hook earlier
132-
// You can use a function directly if you don't need
133-
// parameters coming from the Vue instance
134-
threads () {
128+
// Threads list
129+
// This will update the 'threads' array property on the Vue instance
130+
// that we set in the data() hook earlier
131+
// You can use a function directly if you don't need
132+
// parameters coming from the Vue instance
133+
threads () {
134+
// Here you can use Meteor reactive sources
135+
// like cursors or reactive vars
136+
// as you would in a Blaze template helper
137+
// However, Vue reactive properties will not update
138+
return Threads.find({}, {
139+
sort: {date: -1}
140+
});
141+
},
142+
// Selected thread
143+
// This will update the 'selectedThread' object property on component
144+
selectedThread: {
145+
//// Vue Reactivity
146+
// We declare which params depends on reactive vue properties
147+
params () {
148+
// Here you can use Vue reactive properties
149+
// Don't use Meteor reactive sources!
150+
return {
151+
id: this.selectedThreadId
152+
};
153+
},
154+
// Optionally we can watch the parameters for changes in nested
155+
// objects using the 'deep' option
156+
deep: true,
157+
//// Meteor Reactivity
158+
// This will be refresh each time above params changes from Vue
159+
// Then it calls Tracker.autorun() to refresh the result
160+
// each time a Meteor reactive source changes
161+
update ({id}) {
135162
// Here you can use Meteor reactive sources
136163
// like cursors or reactive vars
137-
// as you would in a Blaze template helper
138-
// However, Vue reactive properties will not update
139-
return Threads.find({}, {
140-
sort: {date: -1}
141-
});
142-
},
143-
// Selected thread
144-
// This will update the 'selectedThread' object property on component
145-
selectedThread: {
146-
//// Vue Reactivity
147-
// We declare which params depends on reactive vue properties
148-
params () {
149-
// Here you can use Vue reactive properties
150-
// Don't use Meteor reactive sources!
151-
return {
152-
id: this.selectedThreadId
153-
};
154-
},
155-
// Optionally we can watch the parameters for changes in nested
156-
// objects using the 'deep' option
157-
deep: true,
158-
//// Meteor Reactivity
159-
// This will be refresh each time above params changes from Vue
160-
// Then it calls Tracker.autorun() to refresh the result
161-
// each time a Meteor reactive source changes
162-
update ({id}) {
163-
// Here you can use Meteor reactive sources
164-
// like cursors or reactive vars
165-
// Don't use Vue reactive properties!
166-
return Threads.findOne(id);
167-
},
164+
// Don't use Vue reactive properties!
165+
return Threads.findOne(id);
168166
},
169167
},
170168
},
171169
});
172170
```
173171

174-
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'):
172+
You can skip the data initialization (the default value will be `null`):
175173

176174
```javascript
177175
new Vue({
@@ -182,7 +180,7 @@ new Vue({
182180
},
183181
meteor: {
184182
// Subscriptions
185-
subscribe: {
183+
$subscribe: {
186184
'threads': []
187185
},
188186
// Threads list

package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
{
22
"name": "vue-meteor-tracker",
3-
"version": "1.1.2",
3+
"version": "1.2.0",
44
"description": "Use Meteor Tracker reactivity inside Vue components",
55
"main": "index.js",
66
"scripts": {
77
"compile": "babel --presets es2015 -d lib/ src/",
88
"prepublish": "npm run compile",
9-
"test": "echo \"Error: no test specified\" && exit 1"
9+
"dev": "npm-watch"
10+
},
11+
"watch": {
12+
"compile": "src/*.js"
1013
},
1114
"repository": {
1215
"type": "git",
@@ -30,6 +33,7 @@
3033
},
3134
"devDependencies": {
3235
"babel-cli": "^6.14.0",
33-
"babel-preset-es2015": "^6.14.0"
36+
"babel-preset-es2015": "^6.14.0",
37+
"npm-watch": "^0.1.6"
3438
}
3539
}

0 commit comments

Comments
 (0)