Grapher + Vue

This package makes using Grapher with Vue in Meteor easier and more declarative.

It automatically subscribes to your queries when the component is loaded, and unsubscribes to them when the component is destroyed.

Query parameters are reactive by default, using Vue's reactivity. So if you for example use this.limit in your query, it will update the query and subscription when this.limit changes.

Setup

meteor add herteby:grapher-vue

1import GrapherVue from 'meteor/herteby:grapher-vue'
2Vue.use(GrapherVue)

Example

<template>
  <div v-if="users.readyOnce">
    Users: {{users.count}}<br>
    Time taken: {{users.time}}ms
    <div v-for="user in users.data">
      <h4>{{user.username}}</h4>
      <pre>{{user.profile}}</pre>
    </div>
  </div>
  <div v-else>Loading...</div>
</template>

<script>
  export default {
    data(){
      return {
        limit:20,
      }
    },
    grapher:{
      users(){
        return {
          collection:Meteor.users,
          query:{
            username:1,
            profile:1,
            $options:{limit:this.limit}
          }
        }
      }
    }
  }
</script>

API

Result

Demo

There's a live demo here, or you can clone my testing repo.