How invoke functions declared in my Vue.js plugins

Question

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?

tony19 · Accepted Answer · 2022-07-15 22:53:39Z

2

If you're trying to access a global method from the template, it would need to be available on the Vue component's instance. So you'd need to set the myFunction function on the Vue.prototype object:

install (Vue, options) {
  Vue.prototype.myFunction = function () {     
    console.log('Test')
  }
}

See the docs on writing plugins.

And as you can see in the docs, it's a common convention to prepend $ to these types of global functions in order to more easily distinguish them from other methods on the Vue instance. So in your case, it would be good to set the function to Vue.prototype.$myFunction.

edited Jul 15, 2022 at 22:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 11, 2019 at 15:34

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How invoke functions declared in my Vue.js plugins

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related