Vue - best way to reuse methods

Question

In vue 2 - what is correct practise for reusing vue methods?

Instead of writing them in each component, what is the best way to make them global?

Answer 1

Mixin

You can create a mixin for it

Mixins are a flexible way to distribute reusable functionalities for Vue components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixin will be “mixed” into the component’s own options.

Example:

// define a mixin object
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}
// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})
var component = new Component() // -> "hello from mixin!"

If you dont want to mix it manually in all components, you can use global mixin

// inject a handler for `myOption` custom option
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

Plugin

Another way to create a method available globally is to create a plugin.

MyPlugin.install = function (Vue, options) {
  //  add global method or property
  Vue.myGlobalMethod = function () {
    // something logic ...
  }
  //  inject some component options
  Vue.mixin({
    created: function () {
      // something logic ...
    }
    ...
  })
  //  add an instance method
  Vue.prototype.$myMethod = function (options) {
    // something logic ...
  }
}

Use plugins by calling the Vue.use() global method:

Vue.use(MyPlugin)

Now these methods will be available everywhere. You can see an example of this here.

Answer 2

There is no really good way of code reusing mechanisms in Vue2, they are just workarounds and sometimes if not carefully designed they add more headaches than they provide. But fortunately, Vue3 offered exactly what was missing from Vue for a long time, new Composition API (true composition instead of merging logic (mixins) or wrapping logic (slots or scoped-slots). Even it is part of Vue 3, you can still use it as a separate module in your Vue2 app. Composition API gives the same joyful development experience as once Hooks brought into React community.