Include global functions in Vue.js

Jordy picture Jordy · Sep 7, 2016 · Viewed 36.1k times · Source

In my Vue.js application I want to have some global functions. For example a callApi() function which I can call every time I need access to my data.

What is the best way to include these functions so I can access it in all my components?

  • Should I create a file functions.js and include it in my main.js?
  • Should I create a Mixin and include it in my main.js?
  • Is there a better option?

Answer

Justin MacArthur picture Justin MacArthur · Sep 7, 2016

Your best bet would be a Plugin, which lets you add features to the global vue system.

[from the vuejs Docs]

MyPlugin.install = function (Vue, options) {

// 1. add global method or property
Vue.myGlobalMethod = ...

// 2. add a global asset
Vue.directive('my-directive', {})

// 3. add an instance method
Vue.prototype.$myMethod = ...

}

Then you would just add

Vue.use(MyPlugin)

in your code before calling your function.

Vue.myGlobalMethod(parameters);

or in your case

Vue.callApi(parameters);