How to Manage Mixins in Vue.JS?
Vue Mixins are simple, yet quite flexible ways of reusing functionalities across multiple components.
The name is self-explaining. All options from the mixin object are “mixed” with the component’s options to form the final options set. Mixins are part of the Vue 2 only, as they’re replaced by Composition API in Vue 3.
The general recommendation is to use mixins when two or more components need to share reusable logic.
const myMixin = {
data() {
return {
name: "Mixin",
blog: {
name: "Vue functionality sharing",
sources: {
docs: true
}
}
}
},
computed: {
fullName() {
return "Vue " + this.name;
},
},
}
export {
myMixin,
} mixin.js
<template>
<div>{ { fullName } }</div>
</template>
<script>
import {myMixin} from "./mixin.js";
export default {
mixins: [myMixin],
data() {
return {
name: "Component",
blog: {
name: "Vue functionality sharing - Mixins",
author: "Robert Molnar"
}
}
}
}
</script> Component.vue
When “Component” is added to the DOM, it will display “Vue Component” within the resulting HTML.
Global Mixins
Mixins are usually grouped by the “thing they provide”. Each of the groups should be in a separate file, so that only the necessary pieces are imported. Sometimes, depending on the project you’re working on, it can happen that all the components need to have some specific method.
Instead of manually importing all the required mixins within all the components, there is a way to perform this “out of the box” – by using global mixins.
Our general recommendation: add all global mixins before the initial component is rendered.
const globalMixin = {
data() {
return {
name: "Global",
blog: {
sources: {
otherBlogs: true
}
}
}
},
}
Vue.mixin(globalMixin); main.js
Merging Options
As you can see in the examples above, it might happen that mixins have overlapping options. In that case, the order of importing mixins is crucial.
Merging non-conflicting options, like lifecycle hooks, watchers, etc., is done by simple chaining. The order of execution is the same as the order of importing. The last handler to be invoked is the one specified in the component itself.
The objects returned by data option will be deeply merged into one with primitive values being overwritten. The order of merging is the same as the order of importing. The data object provided by the component has the greatest relevance.
The data object of the component above will look like this:
{
name: "Component",
blog: {
"name": "Vue functionality sharing - Mixins",
"author": "Robert Molnar",
"sources": {
"docs": true,
"otherBlogs": true
}
}
} The methods and computed values are simply overridden.
This default merging strategy can be avoided by introducing a custom option merging logic.
Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {
// return mergedVal
}Conclusion
In Vue mixins, options are merged by the default strategy, but there is a way to introduce a custom merging strategy. These are available in Vue 2 only, as Vue 3 provides Composition API.
To conclude, these factors provide us with a tool that reduces the amount of code we have to write and maintain while improving readability.
About Author
Robert Molnar is a coding connoisseur with over ten years of experience and a versatile skill set encompassing several programming languages and technologies. With his extensive knowledge of Vue.js, Angular, Java, Node.js, and more, he is a master of all trades in the realm of software development. Molnar’s passion for technology is evident in his notable projects, including NAQ Cyber, Fireside, and MedMatch, where he has left his indelible mark.
Comments16
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa iste inventore rem Community Guidelines.
by Simon & Garfunkel
by Simon & Garfunkel
by Simon & Garfunkel
by Simon & Garfunkel