Undefined $auth in Vue using @websanova/vue-auth

  javascript, jwt, laravel, vue-auth, vue.js

I am trying to create SPA using Vue.js and Laravel as backend. I am using tymon/jwt-auth for JWT Authentication at the backend.

I cannot find $auth in my Login.vue.

I included @websanova/vue-auth in my app.js like this

...
import {createAuth}          from '@websanova/vue-auth/dist/v3/vue-auth';
import driverAuthBearer      from '@websanova/vue-auth/dist/drivers/auth/bearer.esm.js';
import driverHttpAxios       from '@websanova/vue-auth/dist/drivers/http/axios.1.x.esm.js';
import driverRouterVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.esm.js';
...
var auth = createAuth({
    plugins: {
        http: axios,
        router: router
    },
    drivers: {
        http: driverHttpAxios,
        auth: driverAuthBearer,
        router: driverRouterVueRouter,
    },
    options: {
        rolesKey: 'type',
        notFoundRedirect: {name: 'user-account'},
    }
});

Vue.use(auth);

But this gives me Uncaught TypeError: vue.reactive is not a function

I followed latest implementation as instructed at @websanova/vue-auth site

I also tried some old tutorials this and this using v2 of the package, but in that case this.$auth is undefined in Login.vue

Here’s my complete app.js and Login.vue

Source: Ask Javascript Questions

LEAVE A COMMENT