Vue use Plugin in function

Question

im relative new to Vue.js but now i stuck on a maybe stupid simple problem.

I have two files, one for the routes and one for a plugin.

auth.js

export default {
    install: (Vue, options) => {

        Vue.prototype.$auth = {

            login: (email, password) => {
                ...
            }
        };
    }
};

and the router.js

import Vue from 'vue'
import Router from 'vue-router'
import auth from '../auth'

Vue.use(auth);
Vue.use(Router);


const router = new Router({
    ...

    routes: [
        {
            path: '/',
            name: 'index',
            component: function(resolve) {
                require(['../../components/list/index.vue'], resolve)
            }
        },
        {
            path: '/admin',
            name: 'adm',
            component: function(resolve) {
                require(['../../components/admin/event.vue'], resolve)
            },
            beforeEnter: guardRoute
        }

    ]
});

function guardRoute (to, from, next) {
    console.log('?');
}

export default router;

Now in the guardRoute function i want to call the plugin, but i don't know how. I tried something like console.log(auth) but there is only the install() function but not the $auth object. I also tried console.log(Vue) or console.log(router) but i'm not able to call/find the login()-function or the $auth object from the plugin in the console output. So what am i doing wrong? Can anybody help me with this?

thanksd · Accepted Answer · 2018-03-02 19:59:44Z

2

The auth plugin is adding the $auth object to the Vue.prototype. So, you need to first get a reference to the related Vue instance in the beforeEnter navigation guard.

To do that, you'll need to pass a callback to the next parameter. The Vue instance is the first parameter in the callback:

function guardRoute(to, from, next) {
  next(vm => vm.$auth.login('email', 'password'));
}

Here's the documentation on the navigation guards.

answered Mar 2, 2018 at 19:59

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Der_D Over a year ago

thanks for your quick answer. But now i get the following error: [Vue warn]: Failed to mount component: template or render function not defined.

thanksd Over a year ago

That would most likely be caused by a misconfigured Vue component definition. Are you pulling in the component definitions correctly?

Der_D Over a year ago

ah, let me call you my hero of the day. i found the problem. thanks man

Collectives™ on Stack Overflow

Vue use Plugin in function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related