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

Answer 2

Mixins can be registered globally​ too. https://vuejs.org/v2/guide/mixins.html#Global-Mixin