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, 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. If you use @mitar's fork of Tracker, it will also respond to reactive Meteor variables.

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

<template>
  <div v-if="users.$readyOnce">
    Users: {{users.$count}} of {{users.$fullCount}}<br>
    Time taken: {{users.$time}}ms
    <div v-for="user in users">
      <h4>{{user.username}}</h4>
      <pre>{{user.profile}}</pre>
    </div>
    <button v-if="users.$count < users.$fullCount" @click="limit += 20">Load more</button>
  </div>
  <div v-else>Loading...</div>
</template>

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

Live demo

Demo repo

API

Extra result properties

If you need to get rid of these for some reason, just use this Lodash function:

1_.omitBy(result, key => key[0] == '$') //_.omit in Underscore