Using AWS Amplify Vue with routing

Router.vue

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { requiresAuth: true}
    },
    {
      path: '/notes',
      name: 'Notes',
      component: Notes,
      params: {
        'foo': 'bar'
      },
      meta: { requiresAuth: true}
    },
    {
      path: '/menu',
      name: 'Menu',
      component: Menu,
      meta: { requiresAuth: true}
    },
    {
      path: '/profile',
      name: 'Profile',
      component: Profile,
      meta: { requiresAuth: true}
    },
    {
      path: '/auth',
      name: 'Authenticator',
      component: components.Authenticator
    }
  ]
});

router.beforeResolve((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    let user;
    Vue.prototype.$Amplify.Auth.currentAuthenticatedUser().then(data => {
      if (data && data.signInUserSession) {
        user = data;
      }
      next()
    }).catch((e) => {
      next({
        path: '/auth',
        query: {
          redirect: to.fullPath,
        }
      });
    });
  }
  next()
})

I'm trying to follow your tutorial here and adapt it to my paths, but code in line 41 of this gist causes the following error when you build and run the solution.

Cannot read property 'Auth' of undefined

Any idea what I may be doing wrong in my code here:

import VueRouter from "vue-router";
import Vue from "vue";

import Home from "./components/Home";
import Profile from "./components/Profile";
import SignIn from "./components/SignIn";
import Protected from "./components/Protected";

const routes = [
  { path: "/", component: Home },
  { path: "/signin", component: SignIn },
  { path: "/protected", component: Protected, meta: { requiresAuth: true } },
  { path: "/profile", component: Profile, meta: { requiresAuth: true } },
];

const router = new VueRouter({
  routes,
});

/* eslint-disable no-unused-vars */
router.beforeResolve((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    let user;
    Vue.prototype.$Amplify.Auth.currentAuthenticatedUser()
      .then((data) => {
        if (data && data.signInUserSession) {
          user = data;
        }
        next();
      })
      .catch((e) => {
        next({
          path: "/signin",
        });
      });
  }
  next();
});
/* eslint-enable no-unused-vars */

export default router;

Thank you for the tutorial and in advance for the answer.

Hey @aossey, I've just updated the post to use the most current versions of all of our libraries, everything should be working now.

Awesome! Thanks for taking time to do that, really appreciate it.

Hey @aossey, I've just updated the post to use the most current versions of all of our libraries, everything should be working now.

Hi Nader(@dabit3), you mentioned that you updated your post to use the most current versions of all the libraries which is great but going to the AWS Docs, the Vue Framework guides are still utilizing aws-amplify-vue. Can these also be updated? And until then, can you explain a bit how to use the new libraries as a plugin in Vue and if we should still be using the AmplifyEventBus or you recommend using the Hub? Thank you very much!

Hey @cnegrisanu, can you you point me to the docs still using the old Vue libraries?

I know we've updated most of our documentation here to use the new ones: https://docs.amplify.aws/

Damn, don't I feel stupid now?.. Here's the link that I was looking at. I guess it's a full copy of the previous Docs version and it looked so real that I didn't even check the url...
Anyway, I guess problem solved, however, there are two things I'm struggling with:

1. With the new Amplify library changes for Vue, how can I still use it as a plugin, I mean, the portion with Vue.use(AmplifyPlugin, AmplifyModules), what do I replace that with? And should I use Hub to replace the AmplifyEventBus?
2. When using the Datastore with @auth, how can I make sure that a new logged in user will not see the records already synced to the IndexDB from the previously logged in user? Shouldn't Datastore know somehow either clear the IndexDB store or only fetch and display the records for the new user?
   Thanks a lot !