Open In App

Vue.js Mixins

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Mixins</title>
</head>
  
<body>
    <div id="app">
        <h1 style="text-align:center;">
            {{ message }}
        </h1>
  
        <!-- Adding components to HTML -->
  
        <my-comp1 style="text-align:center;">
        </my-comp1><br>
        <my-comp2 style="text-align:center;">
        </my-comp2>
  
    </div>
    <script src="https://unpkg.com/vue"></script>
  
    <script>
        // Creating component 1
        const myComp1 = {
            template: 
`<div><button @click="pressed('Button 1 is pressed')">Button 1</button> </div>`,
  
            // Creating method which shows 
            // alert on button click
            methods: {
                pressed(val) {
                    alert(val);
                }
            }
        }
  
        // Creating component 2  
        const myComp2 = {
            template: 
`<div><button @click="pressed('Button 2 is pressed')">Button 2</button></div>`,
  
            // Creating method which shows alert on button click
            methods: {
                pressed(val) {
                    alert(val);
                }
            }
        }
  
        // Creating vue app 
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 'Geeks for Geeks Vue.js | Mixins !!!'
                }
            },
  
            // Defining components
            components: {
                myComp1: myComp1,
                myComp2: myComp2
            }
        });
    </script>
</body>
  
</html>


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:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Mixins</title>
</head>
  
<body>
    <div id="app">
        <h1 style="text-align:center;">
            {{ message }}
        </h1>
  
        <!-- Adding components to HTML -->
        <my-comp1 style="text-align:center;">
        </my-comp1><br />
        <my-comp2 style="text-align:center;">
        </my-comp2>
    </div>
    <script src="https://unpkg.com/vue"></script>
  
    <script>
        // Creating mixin 
        const Mixin = {
  
            // Creating method which shows 
            // alert on button click
            methods: {
                pressed(val) {
                    alert(val);
                }
            }
        }
  
        // Creating component 1
        const myComp1 = {
            template: 
`<div><button @click="pressed('Button 1 is pressed')">Button 1</button> </div>`,
  
            // Using mixin in component 1
            mixins: [Mixin]
        }
  
        // Creating component 2
        const myComp2 = {
            template: 
`<div><button @click="pressed('Button 2 is pressed')">Button 2</button></div>`,
  
            // Using mixin in component 2
            mixins: [Mixin]
        }
  
        // Creating vue app
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 
                    'Geeks for Geeks Vue.js | Mixins !!!'
                }
            },
  
            // Defining components 
            components: {
                myComp1: myComp1,
                myComp2: myComp2
            }
        });
    </script>
</body>
  
</html>


Output:

Before Clicking the Button:

Vue App

When Button 1 is clicked.

Button 1 click

When Button 2 is clicked.

Button 2 click



Last Updated : 13 Aug, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads