How to create global functions in vue js

January 9, 2021January 3, 2021 Harinder Singh

One way to go about it is by using the Vue mixins. Another great way to go about that is by using Plugin.

Notice how I declared them and the difference between how I called the two global variables, especially the dollar sign($) in the plugin option. Both this.gMixinFun() and this.$gPluginFun() will be available as global method in the Vue instance Options.

OPTION 1: Using Mixin

Vue.mixin({
  methods: {
    gMixinFun: function() {
      return "this is a mixin test"
    }
  }
});

Vue.mixin({

methods: {

gMixinFun: function() {

return "this is a mixin test"

}

});

how to use in components?

//called in component
this.gMixinFun();
//console output
console.log("Using mixins =>", this.gMixinFun());

//called in component

this.gMixinFun();

//console output

console.log("Using mixins =>", this.gMixinFun());

OPTION 2: Using plugin

const plugin = {
  install() {
    Vue.gPluginFun = () => 'this is a plugin test' //Vue.gPluginFun()
    Vue.prototype.$gPluginFun = () => 'this is a plugin test' //this.$gPluginFun()
  }
}

Vue.use(plugin)

const plugin = {

install() {

Vue.gPluginFun = () => 'this is a plugin test' //Vue.gPluginFun()

Vue.prototype.$gPluginFun = () => 'this is a plugin test' //this.$gPluginFun()

}

Vue.use(plugin)

how to use in components?

//use with Vue
Vue.gPluginFun();
//or use with this
this.gPluginFun();
//use with Vue
Vue.$gPluginFun();
//or use with this
this.$gPluginFun();

//use with Vue

Vue.gPluginFun();

//or use with this

this.gPluginFun();

//use with Vue

Vue.$gPluginFun();

//or use with this

this.$gPluginFun();

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

Yes0

No1

Post Views: 1,106

Harinder Singh

My name is Harinder Singh and I specialize in Software industry. I consider myself as a life learner. I love learning new concepts, embracing new ideas and reading and searching for innovation.