Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at global mixins and custom merging strategies for merging mixins into components.

Global Mixin

We can create a mixin that’s applied globally. These mixins will affect every Vue instance created afterward. Therefore, we should be careful when using them.

We can use this to inject custom processing logic that applies to all components.

For example, we can define a global mixin as follows:

Vue.mixin({  
  created() {  
    const foo = this.$options.foo;  
    console.log(foo);  
  }  
});

new Vue({  
  el: "#app",  
  foo: "foo"  
});

Then we’ll see foo logged since the foo option is retrieved from this.$options.foo in the created hook.

When the created hook is called, we’ll see the console.log output since it’s called.

The above example shows how it should be used. Global mixins should be used infrequently since we want to minimize the chance of bugs created by conflicts from global mixins.

Custom Option Merge Strategies

We can adjust the strategies for merging mixin code into components.

To do this, we assign a function to Vue.config.optionMergeStrategies .

For example, we can write the following:

Vue.config.optionMergeStrategies.myOption = (toVal, fromVal) => {  
  return {  
    ...toVal,  
    ...fromVal  
  };  
};

Vue.mixin({  
  myOption: { foo: 1 }  
});

const vm = Vue.extend({  
  myOption: { foo: 2 }  
});

console.dir(vm.options.myOption);

We see that toVal is { foo: 1 } from the mixin and fromVal is { foo: 2 } from the component we created with Vue.extend .

Therefore, we merged myOption from the mixin into the component by letting the component’s myOption taking precedence.

This means that vm.options.myOption has the value { foo: 2 } .

We can write the same thing with new Vue as follows:

Vue.config.optionMergeStrategies.myOption = (toVal, fromVal) => {  
  return {  
    ...toVal,  
    ...fromVal  
  };  
};

const mixin = {  
  myOption: { foo: 1 }  
};

const vm = new Vue({  
  el: "#app",  
  myOption: { foo: 2 },  
  mixins: [mixin]  
});

console.dir(vm.$options.myOption);

We see that vm.options.myOption has the value { foo: 2 } again.

We can also flip them around, which means the mixin’s option has precedence over the component’s option if they have the same name by writing:

Vue.config.optionMergeStrategies.myOption = (toVal, fromVal) => {  
  return {  
    ...fromVal,  
    ...toVal  
  };  
};

const mixin = {  
  myOption: { foo: 1 }  
};

const vm = new Vue({  
  el: "#app",  
  myOption: { foo: 2 },  
  mixins: [mixin]  
});

console.dir(vm.$options.myOption);

Then we get { foo: 1 } from the console.log , which means the mixin ‘s myOption took precedence over the component’s myOption .

We can get various strategies for merging options by using Vue.config.optionMergeStrategies .

There are strategies for common option items like the lifecycle hook methods, watch, computed , methods , directives, etc.

Pretty much any option that we can put into Vue that aren’t our own custom options are in the Vue.config.optionMergeStrategies object.

We can use these preset strategies to set the merging strategies for our own options.

For example, if we want the methods strategy for merging myOption , we can write the following:

const strategies = Vue.config.optionMergeStrategies;  
strategies.myOption = strategies.methods;

Then the merging strategy for merging myOption will be the same as the strategy which we use for methods, which is the component’s methods have precedence over the mixin’s methods if they have the same name.

Conclusion

We can define global mixin to merge the option from the mixin to all components.

This shouldn’t be used frequently since it creates conflicts that are hard to trace.

It should only be used for our own custom-defined options.

We can also create our own mixin merging strategy by adding a property to Vue.config.optionMergeStrategies.optionName and setting a function that takes the option objects from the mixin and component respectively and returns the merged object.

Finally, we can access a full list of strategies by using the Vue.config.optionMergeStrategies object.