[Vuejs]-Sharing functions among Vue.js components?

2👍

You could create plugin that exposes the functions on Vue. Plugins documentation

// group utils functions together 
Vue.prototype.$utils = {
    funcA: function () {  ...  },
    funcB: function () {  ...  }
} 

or

Move them all to common utilities module, src/utils.js, then each Vue component can import as needed:

// src/utils.js
const funcA = () => {
    console.log('funcA');
}

const funcB = () => {
    console.log('funcB');
}

export { funcA, funcB }

// VueComponentA.vue
import { funcA } from 'path/to/utils';

// VueComponentB.vue
import { funcB } from 'path/to/utils';

2👍

Mixins is a concept you can try.

  1. import the component which you need.

  2. add mixin array as below in your component just above the data section (or wherever possible)

    mixins:[yourimportedcomponent],
    data:….

  3. Call the method you want using this.theMethodYouWant();

More you can find it here https://v2.vuejs.org/v2/guide/mixins.html

Leave a comment