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:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Before Clicking the Button:

Vue App

When Button 1 is clicked.

Button 1 click

When Button 2 is clicked.

Button 2 click

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.