Vue.js Mixins

Mixins – Mixins are used to reuse code in Vue components that perform the same action. Mixins are like functions in C programming. We can define some actions in mixins and use it wherever it is necessary. Code reusability is simple with the help of mixins.

There are two types of mixins in Vue:-

1. Local Mixins – Local mixins only functions when we use the mixin object in our Vue component. Here, we will use local mixins.

Syntax : 

const MixinObjectName = {
    methods: {
        // you can write your methods here
    }
}

2. Global Mixins – If we need the same functionality for all components in Vue, we can use global mixins. Global mixins affect every Vue component.

A small example of global mixins:

// Creating global mixin
Vue.mixin({
  created: function () {
    var example = this.$options.example
    if (example) {
      console.log(example)
    }
  }
})

new Vue({
  example: 'This is Vue!!'
})

Output: This is Vue!!

Pre-requisite:

• Vue Js

Approach: First, we will create a Simple Vue.js app without mixin which shows an alert on Button click.

Vue App:

In the above code, Component 1 and Component 2 performs the same function (alert message). We wrote separate functions for both the components. So now we can create mixins and reuse the same function in different components.

Creating Mixin for our App:

const Mixin = {
    methods: {
    
    //creating method which shows alert on button click
    
    pressed(val){
        alert(val);
    }
 }
}

In the above code, we created an object for mixins as Mixin and defined our function within it. So now we can use this Mixin object in our components.

Adding mixin to existing code:

Output:

Before Clicking the Button:

Vue App

When Button 1 is clicked.

Button 1 click

When Button 2 is clicked.

Button 2 click