Vue.js Mixins

Vue.js Mixins

The Vue mixins are a flexible method for distributing reusable features to the Vue component. A mixin object can have many component options. Mixins share the reusable code blocks among the components. Whenever a component uses a mixin, all of the mixin options are “mixed” into the component’s options.

Example: This example explains how we can use the Vue mixins in the Vue.js application.

Index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Mixin</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     <div id="app">
       </div>
       <script type = "text/javascript"> 
       </script>
    </body>
 </html>

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 var vm = new Vue({
   el: '#app', 
   data: {
 },
 methods : {
 },
 });
 var myMixin = { 
 created: function () {
    this.startmixin()
 },
 methods: {
    startmixin: function () {
       alert("This is the Vue.js mixin example"); 
    }
 }
 };
 var Component = Vue.extend({
 mixins: [myMixin]
 })
 var component = new Component();

Output: After executing this code, we will get output, as shown below:

When a mixin and component have an overlapping options, they will be merged together, as shown below:

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
 var mixin = {
   created: function () { 
      console.log('mixin method called')
   }
 }
 new Vue({
   mixins: [mixin] 
 , 
   created: function () {
      console.log('component component called')
   }
 });

Output: After executing this code, we will get output, as shown below:

In the above screenshot, we can see a colored rectangle box that tells the mixin and component are merged together.

If we use the same function name in the methods, the main vue instance will takes the maximum priority.

Example: Let's take an example to understand how we can use the same function names in the methods.

Index.html

<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <title>Vue.js Mixins</title>
     <script src="https://unpkg.com/vue/dist/vue.js"></script> 
   </head>
   <body>
     <div id="app">
     </div>
   </body>
 </html>

Main.js

import Vue from 'vue'
 import App from './App'
 import router from './router'
 Vue.config.productionTip = false
    var mixin = {
       methods: {
          hellojohn: function () {
             console.log('In HelloWorld'); 
          },
          mainmethod: function () {
             console.log('Mixin:Main Method');
          }
       }
    };
    var vm = new Vue({ 
       mixins: 
 [mixin] , 
       methods: { 
          first: function () {
             console.log('first method');
          },
          mainmethod: function () {
             console.log('Main: main method');
          }
       } 
    });
    vm.hellojohn();
    vm.first();
    vm.mainmethod();

Output: After executing this code, we will get output, as shown below:

Here, we can see that the mixin has a method property in which two methods are defined that is “helloworld” and “mainmethod”. Similarly, the Vue instance also has a method property in which again two methods are defined that is “first” and “mainmethod”.

Each of the above methods are defined as a following code snippet:

vm.hellojohn(); // In HelloWorld
 vm.first(); // first method
 vm.mainmethod(); // Main: main method

← Prev Next →