How invoke functions declared in my Vue.js plugins?

plugins

#1

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

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

And include it in main.js file:

import MyPlugin from './plugins/my-plugin.js'
Vue.use(MyPlugin)

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>
</a>

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?


#2

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 =...