How to create global functions in vue js

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"
    }
  }
});

how to use in components?

//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)

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();