Vue and Meteor.call

VueJS
1

I am new to Vue and I am loving it. Re-implementing existing applications is a lot of fun.

Unfortunately I am having a mental block with Meteor.methods. How do I call a meteor method, from an event, and return the asynchronous results on the client?

2

Vue is indeed a pleasure to work with. In general, what you are looking for is the following:

  1. In your template code, have an event listener that calls a vue method, eg: <div @click="foobar()">button</div>
  2. Inside the foobar() Vue method run the Meteor.call() code, just like you did in Blaze. When the Meteor.call() returns data, in the callback update whichever variables you need in the data() section of your Vue instance. And everything beyond that point is covered by Vue’s own reactivity.

I think a good recommendation when working with Meteor and Vue is to rely on Vue’s own reactivity as much as possible. So you just use Meteor.call() to inject data into Vue’s own variables and let Vue handle everything from there.

2 Likes
3

That indeed sounds easy and straight forward. I guess I have been overthinking it.

My next challenge is meteor reactivity. Let’s say I am on my profile page and logout. How do I make sure I get warped to the login page (or any other url).

I have a reactive meteor method in my app

meteor:{
 currentUser(){
  return Meteor.user()
 }
}

but that method fires like 20 times when I first load the page.

4

In broad terms, there’s at least two options here. Somewhere in your app, probably in the top level component that is often called App.vue, you’ll most likely have a <router-view></router-view> element. This is where Vue router will render your routes. You can change that part of the template to this:

<router-view v-if="userId"></router-view>
<div v-else>you need to sign in</div>

And in the same component you’d have have a reactive ‘userId’ property inside the meteor object like you have above with currentUser, that calls Meteor.userId(). I prefer Meteor.userId() here above Meteor.user(), but that is another topic.

The second option is, in this same component, to use Vue’s watcher on the userId and inside thst, when there’s no userId, use router.push to direct user to the login page.

I generally try not to put too much of this logic into routes themselves as it is easier to deal with reactivity in the component.

5

Thank you. Rather than trying to redirect (when accessing a page without proper credentials) I now just show the need to login.

My App.vue uses dynamic layouts

<template>
  <component :is="layout">
    <router-view :layout.sync="layout"/>
  </component>
</template>