Vue Auth Vue 3 Support

2020-11-15 JavaScript Vue.js

Vue auth has been updated to now fully support Vue 3 with the createAuth and useAuth syntax for creating and consuming the plugin.

The update comes with a fully working Vue 3 demo with plenty of examples on how to setup and use auth with Vue 3.

Vue 3 Install

For the Vue 3 vue-auth plugin install just a bit of syntax will change in our setup.

import {createAuth}          from '@websanova/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';
import driverOAuth2Google    from '@websanova/vue-auth/dist/drivers/oauth2/google.esm.js';
import driverOAuth2Facebook  from '@websanova/vue-auth/dist/drivers/oauth2/facebook.esm.js';

driverOAuth2Google.params.client_id = 'GOOGLE-TOKEN';
driverOAuth2Facebook.params.client_id = 'FACEBOOK-TOKEN';

export default (app) => {
    app.use(createAuth({
        plugins: {
            http: app.axios,
            router: app.router,
        },
        drivers: {
            http: driverHttpAxios,
            auth: driverAuthBearer,
            router: driverRouterVueRouter,
            oauth2: {
                google: driverOAuth2Google,
                facebook: driverOAuth2Facebook,
            }
        },
        options: {
            rolesKey: 'type',
            notFoundRedirect: {name: 'user-account'},
        }
    }));
}

Vue 2 Install

This will remain the same for the most part but note:

  1. The new options syntax with plugins, dirvers, options.
  2. You must explicitly specify the Vue 2 version file to use it.
import Vue                   from 'vue'
import auth                  from '@websanova/vue-auth/dist/v2/vue-auth.esm.js';
import driverAuthBearer      from '@websanova/vue-auth/dist/drivers/auth/bearer.js';
import driverHttpAxios       from '@websanova/vue-auth/dist/drivers/http/axios.1.x.js';
import driverRouterVueRouter from '@websanova/vue-auth/dist/drivers/router/vue-router.2.x.js';
import driverOAuth2Google    from '@websanova/vue-auth/dist/drivers/oauth2/google.js';
import driverOAuth2Facebook  from '@websanova/vue-auth/dist/drivers/oauth2/facebook.js';

driverOAuth2Google.params.client_id = 'GOOGLE-TOKEN';
driverOAuth2Facebook.params.client_id = 'FACEBOOK-TOKEN';

Vue.use(auth, {
    plugins: {
        http: Vue.axios, 
        router: Vue.router,
    },
    drivers: {
        auth: driverAuthBearer,
        http: driverHttpAxios, 
        router: driverRouterVueRouter,
        oauth2: {
            google: driverOAuth2Google,
            facebook: driverOAuth2Facebook,
        }
    },
    options: {
        rolesKey: 'type',
        notFoundRedirect: {name: 'user-account'},
    }
});

New Options Format

As shown in the above examples the option format has been changed to include 3 parent object containers for plugins, drivers and options.

This was partially updated to make the Vue 3 version work with the core code logic. But mostly it's been updated to help remove confusion with the install as a lot of people seem to get stuck up have all the dependencies set.

Resources

Documentation and live demo:

Get the source at:

If you like the package, please consider sponsoring:

Related Posts