Mixins in vue js:

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.

 

Let suppose i want to implement enable/hide loader methods in whole project, but i don't want to create methods for enable/hide loader in every vue instance.

 

Then Mixins is good idea over here. Please check below examples for more details:

 

mixins:

export const myMixin = {

data() {

return {

isLoading: false,

}

},

methods: {

enableLoader() {

this.isLoading = true;

},

hideLoader() {

this.isLoading = false;

}

}

};

 

Vue instance:

import { myMixin } from '../mixins';

new Vue({

mixins: [myMixin],

methods: {

method1() {

 

// Here you can use the methods from the Mixins, You can add more global methods to mixin and can use over different vue instance

this.enableLoader();

}

}

});