Meteor custom Vue options: what can/should they contain?

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):

meteor: {
    data: {
      count() {
        return Session.get('counter');
      }
    }
  },

Now, in the Chat.vue file this meteor option contains a subscribe object and a messages method

meteor: {
    subscribe: {
      'messages': [],
    },
    messages() {
      return Messages.find({}, {
        sort: { date: -1 },
      });
    },
  },

However, calls to meteor functions are also found in the Vue methods option, sibling, and hence outside of the scope of this meteor custom Vue option:

methods: {
    sendMessage() {
      Meteor.call('addMessage', this.newMessage);
      this.newMessage = '';
    },
    removeMessage(_id) {
      Meteor.call('removeMessage', _id);
    },
  },
};

So I am wondering:

  • 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.

1 Like

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.

2 Likes
  meteor: {
    data: {
      count() {
        return Session.get('counter');
      }
    }
  },

Could be rewritten as:

  meteor: {
    count() {
      return Session.get('counter');
    }
  },

Since data is optional.

1 Like

Did anybody manage to use custom meteor option in mixins?

@gusto Try updating vue-meteor-tracker to the latest version.

1 Like

Thanks a lot, it works perfect now. :slight_smile: