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.