How invoke functions declared in my Vue.js plugins?



I wrote a Vue.js plugin to access Vue functions globally:

const MyPlugin = {
    install (Vue, options) {
      Vue.myFunction = function () {     
  export default { MyPlugin }

And include it in main.js file:

import MyPlugin from './plugins/my-plugin.js'

but, when I try to invoke myFunction from a Vue component like that:

<a href="#">
  <i class="fa fa-gears fa-fw"></i>  {{ myFunction() }} <span class="fa arrow"></span>

it gives me the error below:

Property or method "myFunction" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option or for class-based components, by initializing the property

What I need to do to access “myFunction” in vue components?


You are adding the component to the extractor, but would have to add it to the prototype to make it available in instances.

Vue.prototype. myFunction =...