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.
Login.vue
<template>
<div>
<blaze-template template="atForm" tag="span" />
</div>
</template>
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"
Vue.use(VueRouter)
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", to.name, "user", Meteor.user())
if (to.name !== "login" && !Meteor.user()) next({ name: "login" })
else next()
})
routes.js:
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?
Thanks!