How to use meteor + Vue + useraccounts?

I’m currently building my first app with meteor and vue and try to integrate the useraccounts:core / bootstrap package.

It seems that there are people that managed to use the useraccounts:* packages together with a Vue project, e.g. Proper handling of computed property with vue-meteor-tracker

However, I didn’t manage yet to get this working. I created a login page using vuejs:blaze-integration.


    <blaze-template template="atForm" tag="span" />

I started using the VueRouter (as I managed to get this working together with Vue and I’m familiar with it anyway). Router initialization:

/* global Meteor:false */
import Vue from "vue"
import VueRouter from "vue-router"
import { routes } from "./routes"

export const router = new VueRouter({
  routes, // short for `routes: routes`

// check if used has been logged in
router.beforeEach((to, from, next) => {
  if (!to) next()
  console.log("navigate to",, "user", Meteor.user())
  if ( !== "login" && !Meteor.user()) next({ name: "login" })
  else next()


import Login from "/imports/ui/layouts/Login.vue"

export const routes = [
    path: "/login",
    name: "login",
    component: Login,
    path: "/",
    component: AppLayout,
    children: [

With this setup, the signin page shows up and I also also navigate to the register form. (I guess it stays within the form.)

However, as soon as I login, the app stays blank, even after reload. (If I clear all site data I can restart with login again.)

I guess that I need to add some navigation information from /login to /?

Or should I wrap my AppLayout with an v-if to check whether the user is logged in and switch between login and main app there?

Any suggestions?

Is there any documentation available about this case or any sample project?


Hi @peter11 ,

Finally, did you manage to have useraccounts:core package working with vueRouter?

I created this package a while ago. I am still using it, and it works as desired