Include global functions in Vue.js

Question

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 1

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