Declarative subscriptions and meteor reactive data (subscriptions, collections, tracker...)
meteor npm install --save vue-meteor-tracker
Install the plugin into Vue:
import VueMeteorTracker from 'vue-meteor-tracker'
Vue.use(VueMeteorTracker)Note: if you are using the Meteor akryum:vue package, you don't need to install the plugin.
Object.assign.
In your Vue component, add a meteor object :
export default {
meteor: {
// Meteor specific options
}
}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.
export default {
meteor: {
// Subscriptions
$subscribe: {
// Subscribes to the 'threads' publication with no parameters
'threads': [],
// Subscribes to the 'threads' publication with static parameters
'threads': ['new', 10], // The 10 newest threads
// Subscribes to the 'posts' publication with dynamic parameters
// The subscription will be re-called when a vue reactive property changes
'posts': function() {
// Here you can use Vue reactive properties
return [this.selectedThreadId] // Subscription params
}
}
}
}You can also use the $subscribe(name, ...params) method in you component code:
ready () {
// Subscribes to the 'threads' publication with two parameters
this.$subscribe('thread', 'new', 10)
}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:
console.log(this.$subReady.thread)Or in your template:
<div v-if="!$subReady.thread">Loading...</div>You can also change the default subscription method by defining the Vue.config.meteor.subscribe function:
// You can replace the default subcription function with your own
// Here we replace the native subscribe() with a cached one
// with the ccorcos:subs-cache package
const subsCache = new SubsCache({
expireAfter: 15,
cacheLimit: -1
})
Vue.config.meteor.subscribe = function(...args) {
return subsCache.subscribe(...args)
}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 a function.
Here is an example:
export default {
data() {
return {
selectedThreadId: null,
// We can init the property value in the data() component hook
threads: [],
selectedThread: null
}
},
meteor: {
// Subscriptions
$subscribe: {
// We subscribe to the 'threads' publication
'threads': []
},
// Threads list
// This will update the 'threads' array property on the Vue instance
// that we set in the data() hook earlier
// You can use a function directly if you don't need
// parameters coming from the Vue instance
threads () {
// Here you can use Meteor reactive sources
// like cursors or reactive vars
// as you would in a Blaze template helper
return Threads.find({}, {
sort: {date: -1}
})
},
// Selected thread
// This will update the 'selectedThread' object property on component
selectedThread () {
return Threads.findOne(this.selectedThreadId)
}
}
})You can skip the data initialization (the default value will be null).
Use the reactive data in the template:
<!-- Thread list -->
<thread-item v-for="thread in threads" :data="thread" :selected="thread._id === selectedThreadId" @select="selectThread(thread._id)"></thread-item>
<!-- Selected thread -->
<thread v-if="selectedThread" :id="selectedThreadId"></thread>Or anywhere else in you Vue component:
computed: {
count () {
return this.threads.length
}
}You can deactivate and activate again the meteor data on the component with this.$startMeteor and this.$stopMeteor:
export default {
meteor: {
// ...
},
methods: {
activate () {
this.$startMeteor()
},
deactivate () {
this.$stopMeteor()
}
}
}You can also prevent meteor data from starting automatically with $lazy:
export default {
meteor: {
$lazy: true,
// ...
}
}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.
// Disable Vue reactivity on Meteor data
Vue.config.meteor.freeze = trueVue 2+ only
You can use Meteor directly in the template using the Meteor components and scoped slots:
<!-- Subscription -->
<MeteorSub
name="notes"
:parameters="[limit]"
>
<template slot-scope="{ loading }">
<button @click="sort = !sort">Toggle sort</button>
<!-- Reactive Meteor data -->
<MeteorData
:query="findNotes"
class="notes"
>
<template slot-scope="{ data: notes }">
<div v-for="note in notes" class="note">
<div class="text">{{ note.text }}</div>
</div>
</template>
</MeteorData>
<div v-if="loading" class="loading">Loading...</div>
</template>
</MeteorSub>import { Notes } from '../api/collections'
export default {
data () {
return {
sort: true,
}
},
methods: {
findNotes () {
return Notes.find({}, {
sort: { created: this.sort ? -1 : 1 },
})
}
}
}- Write your components in vue files
- Example project without blaze
- Example project with blaze
- Add routing to your app
- Add internationalization to your app
- Manage your app state with a vuex store
- Integrate apollo
LICENCE ISC - Created by Guillaume CHAU (@Akryum)