Vue integration for Meteor

Declarative subscriptions and meteor reactive data (subscriptions, collections, tracker...)

Example project

Sponsors

Gold

Silver

Bronze

Installation

meteor npm install --save vue-meteor-tracker

Install the plugin into Vue:

1import VueMeteorTracker from 'vue-meteor-tracker'
2Vue.use(VueMeteorTracker)

Note: if you are using the Meteor akryum:vue package, you don't need to install the plugin.

⚠️ You may need to polyfill Object.assign.

Usage

In your Vue component, add a meteor object :

1export default {
2  meteor: {
3    // Meteor specific options
4  }
5}

Subscriptions

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.

1export default {
2  meteor: {
3    // Subscriptions
4    $subscribe: {
5      // Subscribes to the 'threads' publication with no parameters
6      'threads': [],
7      // Subscribes to the 'threads' publication with static parameters
8      'threads': ['new', 10], // The 10 newest threads
9      // Subscribes to the 'posts' publication with dynamic parameters
10      // The subscription will be re-called when a vue reactive property changes
11      'posts': function() {
12        // Here you can use Vue reactive properties
13        return [this.selectedThreadId] // Subscription params
14      }
15    }
16  }
17}

You can also use the $subscribe(name, params) method in you component code:

1mounted () {
2  // Subscribes to the 'threads' publication with two parameters
3  this.$subscribe('thread', ['new', 10])
4}

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:

1console.log(this.$subReady.thread)

Or in your template:

1<div v-if="!$subReady.thread">Loading...</div>

You can also change the default subscription method by defining the Vue.config.meteor.subscribe function:

1// You can replace the default subcription function with your own
2// Here we replace the native subscribe() with a cached one
3// with the ccorcos:subs-cache package
4const subsCache = new SubsCache({
5  expireAfter: 15,
6  cacheLimit: -1
7})
8
9Vue.config.meteor.subscribe = function(...args) {
10  return subsCache.subscribe(...args)
11}

Reactive data

You can add reactive properties that 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 that returns the result.

Here is an example:

1export default {
2  data() {
3    return {
4      selectedThreadId: null
5    }
6  },
7  meteor: {
8    // Subscriptions
9    $subscribe: {
10      // We subscribe to the 'threads' publication
11      'threads': []
12    },
13    // Threads list
14    // You can access tthe result with the 'threads' property on the Vue instance
15    threads () {
16      // Here you can use Meteor reactive sources
17      // like cursors or reactive vars
18      // as you would in a Blaze template helper
19      return Threads.find({}, {
20        sort: {date: -1}
21      })
22    },
23    // Selected thread
24    selectedThread () {
25      // You can also use Vue reactive data inside
26      return Threads.findOne(this.selectedThreadId)
27    }
28  }
29})

Use the reactive data in the template:

1<!-- Thread list -->
2<ThradItem
3  v-for="thread in threads"
4  :data="thread"
5  :selected="thread._id === selectedThreadId"
6  @select="selectThread(thread._id)"
7/>
8
9<!-- Selected thread -->
10<Thread v-if="selectedThread" :id="selectedThreadId"/>

Or anywhere else in you Vue component:

1computed: {
2  count () {
3    return this.threads.length
4  }
5}

Activating and deactivating meteor data

You can deactivate and activate again the meteor data on the component with this.$startMeteor and this.$stopMeteor:

1export default {
2  meteor: {
3    // ...
4  },
5
6  methods: {
7    activate () {
8      this.$startMeteor()
9    },
10
11    deactivate () {
12      this.$stopMeteor()
13    }
14  }
15}

You can also prevent meteor data from starting automatically with $lazy:

1export default {
2  meteor: {
3    $lazy: true,
4    // ...
5  }
6}

Freezing data

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.

1// Disable Vue reactivity on Meteor data
2Vue.config.meteor.freeze = true

Without meteor option

Not currently SSR-friendly

With the special methods injected to the components, you can use reactive Meteor data without the meteor option:

1export default {
2  data () {
3    return {
4      limit: 5,
5      sort: true,
6    }
7  },
8
9  created () {
10    // Not SSR friendly (for now)
11    this.$subscribe('notes', () => [this.limit])
12  },
13
14  computed: {
15    notes () {
16      // Not SSR friendly (for now)
17      return this.$autorun(() => Notes.find({}, {
18        sort: { created: this.sort ? -1 : 1 },
19      }))
20    },
21
22    firstNote () {
23      return this.notes.length && this.notes[0]
24    },
25  },
26}

Components

Vue 2+ only

You can use Meteor directly in the template using the Meteor components and scoped slots:

1<!-- Subscription -->
2<MeteorSub
3  name="notes"
4  :parameters="[limit]"
5>
6  <template slot-scope="{ loading }">
7    <button @click="sort = !sort">Toggle sort</button>
8
9    <!-- Reactive Meteor data -->
10    <MeteorData
11      :query="findNotes"
12      class="notes"
13    >
14      <template slot-scope="{ data: notes }">
15        <div v-for="note in notes" class="note">
16          <div class="text">{{ note.text }}</div>
17        </div>
18      </template>
19    </MeteorData>
20
21    <div v-if="loading" class="loading">Loading...</div>
22  </template>
23</MeteorSub>

1import { Notes } from '../api/collections'
2
3export default {
4  data () {
5    return {
6      sort: true,
7    }
8  },
9
10  methods: {
11    findNotes () {
12      return Notes.find({}, {
13        sort: { created: this.sort ? -1 : 1 },
14      })
15    }
16  }
17}

---

Next steps

• 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)