How to access a Vue plugin from another plugins (using Vue.prototype)?

Question

I'm trying to write a Vue plugin that's a simple abstraction to manage auth state across my app. This will need to access other Vue plugins, namely vuex, vue-router and vue-apollo (at the moment).

I tried extending Vue.prototype but when I try to access the plugin's properties how I would normally - eg. this.$apollo - I get the scope of the object, and therefore an undefined error. I also tried adding vm = this and using vm.$apollo, but this only moves the scope out further, but not to the Vue object - I guess this is because there is no instance of the Vue object yet?

export const VueAuth = {
  install (Vue, _opts) {
    Vue.prototype.$auth = {
      test () {
        console.log(this.$apollo)
      }
    }
  }
}

(The other plugins are imported and added via. Vue.use() in the main app.js)

Alternatively, I tried...

// ...
  install (Vue, { router, store, apollo })
// ...

but as a novice with js, I'm not sure how this works in terms of passing a copy of the passed objects, or if it will mutate the originals/pass by ref. And it's also very explicit and means more overhead if my plugin is to reach out to more plugins further down the line.

Can anyone advise on a clean, manageable way to do this? Do I have to instead alter an instance of Vue instead of the prototype?

Chad von Nau · Accepted Answer · 2021-06-19 19:20:53Z

6

In the plugin install function, you do not have access to the Vue instance (this), but you can access other plugins via the prototype. For example:

main.js:

Vue.use(Apollo)
Vue.use(VueAuth) // must be installed after vue-apollo

plugin.js:

export const VueAuth = {
  install (Vue) {
    Vue.prototype.$auth = {
      test () {
        console.log(Vue.prototype.$apollo)
      }
    }
  }
}

answered Jun 19, 2021 at 19:20

Chad von Nau

4,4241 gold badge27 silver badges34 bronze badges

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

Comments

Marius Jaskunas LeMarkiz · Accepted Answer · 2020-04-25 13:13:47Z

I found a simple solution for this issue:

In plugin installer you need to add value to not just prototype, but Vue itself to be able to use it globally.

There is a code example:

Installer:

import apiService from "../services/ApiService";
// Service contains 'post' method

export default {
  install(Vue) {
    Vue.prototype.$api = apiService;
    Vue.api = apiService;
  }
};

Usage in other plugin:

import Vue from "vue";

...

const response = await Vue.api.post({
  url: "/login",
  payload: { email, password }
});

Usage in component:

const response = await this.$api.post({
  url: "/login",
  payload: { email, password }
});

I'm not sure if that's a good solution, but that made my scenario work perfectly.

James Booth · Accepted Answer · 2019-04-28 21:24:47Z

So, I got around this by converting my property from a plain ol' object into a closure that returns an object, and this seems to have resolved my this scoping issue.

Honestly, I've jumped into Vue with minimal JS-specific knowledge and I don't fully understand how functions and the likes are scoped (and I'm not sure I want to look under that rock just yet......).

export const VueAuth = {
  install (Vue, opts) {
    Vue.prototype.$auth = function () {
      let apollo = this.$apolloProvider.defaultClient
      let router = this.$router

      return {
        logIn: function (email, password) {
          apollo.mutate({
            mutation: LOGIN_MUTATION,
            variables: {
              username: email,
              password: password,
            },
          }).then((result) => {
            // Result
            console.log(result)
            localStorage.setItem('token', result.data.login.access_token)
            router.go(router.currentRoute.path)
          }).catch((error) => {
            // Error
            console.error('Error!')
            console.error(error)
          })
        },

        logOut: function () {
          localStorage.removeItem('token')
          localStorage.removeItem('refresh-token')
          router.go()
          console.log('Logged out')
        },
      }
    }

It's a rudimental implementation at the moment, but it'll do for testing.

Collectives™ on Stack Overflow

How to access a Vue plugin from another plugins (using Vue.prototype)?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related