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.

BREAKING CHANGE: Beginning with 1.0, instead of the result being in result.data, the result is the root object, and the extra properties are prefixed with $.

Setup

meteor add herteby:grapher-vue

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

Example

Live demo, clone my testing repo.

<template>
  <div v-if="users.$ready">
    Users: {{users.$count}}<br>
    Time taken: {{users.$time}}ms
    <div v-for="user in users">
      <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:{
            $options:{limit:this.limit},
            username:1,
            profile:1
          }
        }
      }
    }
  }
</script>

API

Extra result properties