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 i

Answer 1

I have a file with function like a func.js like below

export const func = {
   functionName: (data) => {
      return something  
    }
}

In main.js add 2 string

import {func} from './func.js'

Vue.prototype.$func = func

and you can use from all components if in script tag like below

this.$func.functionName(somedata)

or if template tag like

$func.functionName(somedata)

Answer 2

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 3

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