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

  methods: {
    gMixinFun: function() {
      return "this is a mixin test"

how to use in components?

//called in component
//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()


how to use in components?

//use with Vue
//or use with this
//use with Vue
//or use with this


Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Harinder Singh

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.