VueJS plugins conflict

Question

I created two plugins in my VueJS app powered by Vue CLI 4 but when I tried to use it in my page only one will be working

| plugins
|-- axios.vue
|-- authentication.vue

axios.vue

import Vue from "vue";

Plugin.install = function(Vue) {
  Vue.prototype.$myName = "Dean Armada";
};

Vue.use(Plugin);

export default Plugin;

authentication.vue

import Vue from "vue";

Plugin.install = function(Vue) {
  Vue.prototype.$name = "Chris Guinto";
};

Vue.use(Plugin);

export default Plugin;

main.js

import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";

Vue.use(axios);
Vue.use(authentication);

instructions.vue

<template>
  <div>
      Hello World
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$name);
      console.log(this.$myName);
    }
  }
</script>

<style lang="scss" scoped>

</style>

TAKE NOTE

The output above will be "Dean Armada" only and the console.log(this.$name) is undefined
But if I commented out the Vue.use(axios) the console.log(this.$name) will work so the output will be "Chris Guinto" and the other one is undefined because the axios plugin is not activated

So how can I make them both work at the same time?

This seems very confusing. You're doubling up on your `Vue.use()` calls. Also, `Plugin` is never defined in any of your code and why are you defining plugins in single-file `.vue` components? — Phil, Apr 02 '20 at 06:12
Because that is what document says on creating a Vue plugin. https://vuejs.org/v2/guide/plugins.html — Dean Christian Armada, Apr 02 '20 at 06:30
Right, yeah. Those aren't the most comprehensive instructions. If you're motivated, you could always raise a documentation issue. — Phil, Apr 02 '20 at 06:41

score 5 · Accepted Answer · edited Apr 02 '20 at 06:23

5

Perhaps try and simplify it a little with the following approach?

// plugins/axios.js
export default {
    install(Vue){   
        Vue.prototype.$myname = "Dean Armada";
    }
}

// plugins/authentication.js
export default {
    install(Vue){   
        Vue.prototype.$name = "Chris Guinto";
    }
}

// main.js
import axios from "./plugins/axios.js";
import authentication from "./plugins/authentication.js";

Vue.use(axios);
Vue.use(authentication);

new Vue({
  el: '#app',
  render: h => h(App)
})

edited Apr 02 '20 at 06:23

Phil

157,677
23
242
245

answered Apr 02 '20 at 06:18

Tim Sheehan

3,994
1
15
18

Wow it worked! This is great! I just copied the documentation here https://vuejs.org/v2/guide/plugins.html. I did not know it can be done with your simplified approach – Dean Christian Armada Apr 02 '20 at 06:29

VueJS plugins conflict

TAKE NOTE

1 Answers1