Trying to use Akryum’s meteor-vue-component package, I am going trying to understand the Vue2 example and I am confused concerning what can or should go into the meteor custom Vue option.
In the App.vue file, this option contains a data object that itself contains one method count() (which makes me wonder why have it as data object method and not as a function directly below the meteor option):
what are the allowed properties of this meteor option object?
how do I decide what should go below it or inside its sibling standard Vue options?
Since I am new to Vue, I also wonder how to define such custom Vue options, as I could not easily find where this meteor custom option was defined in the meteor-vue-component code.
It’s not a part of akryum:vue-component but of akryum:vue-meteor-tracker, that’s why you didn’t find it in the code. The documentation for this feature can be found here: https://github.com/Akryum/vue-meteor-tracker#usage
Personally, I see no use and there’s no way I’d even want to use such a terrible (and luckily unneeded in Vue) feature as Session or ReactiveVar. That is, probably as long as I don’t mix both Vue and Blaze templates in the same application.
There’s a difference between Meteor.call() and Messages.find(). To run the first one, all you need is to import Meteor. For the second, you need to get access to Minimongo. That’s why you can see Meteor.call() in the methods.
And the methods are the right place for that, as you try to perform an action on the server with Meteor.call or get the fetched (non-reactive) data directly from the server without using the expensive pub/sub in a place you wouldn’t need it.
Use meteor: {} only to grab the reactive data from Meteor (Minimongo cursor, Session, ReactiveVar), so that you can use it in Vue. But do all the rest with Vue.
Last question, why data()? I believe that was just to show the possibility of using it. It’s not needed in this particular example.