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();

   }

  }

 });