TL;DR: Level up your Vue development with the Composition API! This feature in Vue 3 provides a straightforward and flexible method to share code among components, overcoming restrictions encountered with traditional Mixins. Embrace cleaner, more scalable components for your Vue applications.
Vue Mixins is a very popular concept for reusable code sharing between components. However, the Composition API introduced in Vue 3 provides much better functionalities to implement reusable components.
This article will go through the concept of Mixins, the limitations of Mixins, and how the Composition API can address these limitations.
Mixins are blocks of code clearly defined in a prescribed manner by Vue. We can share them among the Vue components to implement common functionalities. So, Mixins help developers avoid unnecessary code repetitions and reuse functionalities across a Vue application.
When shared functionalities and properties have to be implemented in multiple Vue components, they can be extracted into a separate module, as shown in the following code.
//MixinComponent.js
export default{
data: ()=>({
reuseData: "Mixin data";
}),
methods: {
reuseMethod() {
console.log('Hello from mixin!')
}
}
} A Mixin object can contain any component option—such as data, methods, etc.—as given in the previous example.
To use the Mixin in any component, you simply have to import the Mixin module and assign it to the mixins configuration property in the component.
<!--MyComponent.vue-->
<template>
<div>
<h1>This component uses Mixins.</h1>
<h2>Mixin data {{reuseData}}</h2><h2>Calling Mixin method {{reuseMethod()}}</h2>
</div>
</template>
<script>
//Import MixinComponent.js
import myMixin from './MixinComponent.js'
export default {
mixins:[myMixin],
data:()=>({
componentData: 0
}),
methods:{
componentMethod() {...}
}
}
</script> At runtime, the options specified in the Mixin will be available as options and will be “mixed” into the consuming component’s options.
Even though Mixins were the primary method to implement reusability in Vue 2, some drawbacks came along with them.
When there are multiple Mixins used in a component, all the properties of the Mixins will be merged into the component. As the code base grows, it’ll get increasingly harder to track and avoid property name conflicts between the Mixins and the components, even with the merge strategies introduced by Vue.
Since there’s no hierarchical relationship between Mixins and the components consuming them, components can use data properties defined in a Mixin. On the other hand, Mixins can also use data properties from components, assuming they are already defined.
As a result, properties may seem to appear out of nowhere, mainly when components use multiple Mixins. This could put developers in a messy situation because it’s hard to debug the code and identify the modules from which the conflicts arise.
The flexibility provided by Mixins is quite limited, as Mixins do not allow passing parameters to change the logic implemented in them.
Vue introduced the Composition API to address the issues resulting from the fragmented behavior of Vue Mixins and to provide functionalities to arrange code blocks related to the same logical concerns.
Composition API is a built-in feature of Vue 3 and a plug-in in Vue 2.
When using Composition API, Reusable components are defined as JavaScript variables. We can return those JS variables from a component option named setup instead of defining the component functionalities in terms of object properties such as states, methods, etc.
Here’s a small demonstration of this process.
The useComp.js component shows how to define a component as a JavaScript function to reuse it in any other component using the Composition API.
//useComp.js
//import ref function to define reactive properties
import {ref} from 'vue'
export default function useComp(){
const reuseData = ref ("Reusable data")
function reuseMethod() {
console.log(reuseData.value);
console.log('Hello from Reusable method!')
}
return {
reuseData,
reuseMethod
}
} In the previous component, the ref function from Vue 3.0 is used to create a reactive reference to the variables so that they can be safely passed across the application without worrying about losing their reactivity along the way.
After defining the reusable features, we can easily import the component to any consuming component. The features will be returned from the setup() function, which is the entry point for the Composition API.
<!--MyComponent.vue-->
<template>
<div>
<h1>This component uses Component API.</h1>
<h2>Reusable data {{reuseData}}</h2><h2>Calling the reusable method {{reuseMethod()}}</h2>
</div>
</template>
<script>
//Import useComp.js
import useComp from './useComp.js'
export default {
//Use setup option as the entry point to the Composition API
setup(){
const {reuseData, reuseMethod} = useComp()
return{
reuseData,
reuseMethod
}
}
}
</script> That’s it! We can easily implement the same functionalities provided by Mixins using the Composition API.
Do check out the official documentation to learn more about the Composition API.
There’s no functionality difference between the Mixins approach and the Composition API approach. However, Composition API provides clear and straightforward solutions to all the drawbacks of Mixins.
As shown in the example in the previous section, any states, variables, or methods reused from a Composable (i.e., a function using the Composition API) have to be explicitly defined in the setup() method of the consuming component.
Therefore, naming collisions between multiple Composables and the consuming component won’t occur. Also, the developer will easily be able to identify the origin of every variable used in the component.
Unlike Mixins, we can pass parameters to Composables to alter their logic easily.
Let’s have a look at the following Composable that takes a parameter.
//useComp.js
//import ref function to define reactive properties
import {ref} from 'vue'
export default function useComp(initialParam = "Composable data"){
const reuseData = ref (initialParam)
function reuseMethod() {
console.log(reuseData.value);
console.log('Hello from Reusable method!')
}
return {
reuseData,
reuseMethod
}
} The useComp() Composable function takes initialParam as a parameter.
When calling the useComp() function from a consuming component, we can either pass a value to the initialParam or call the function without passing any parameter. In that case, the default value “Composable data” will be assigned to initialParam.
Even though Mixins are pretty straightforward to use in most cases, they have a few drawbacks, as discussed in this article.
The newly introduced Composition API provides more flexible and clean methods to overcome these difficulties and reuse components in a much easier way. Especially when it comes to implementing much larger and scalable applications, the Composition API takes over Vue Mixins.
I hope you got a better understanding of these two approaches for code reusability in Vue. So, next time you can be mindful when choosing between Mixins and the Composition API. Thank you for reading!
The Syncfusion Vue UI components library is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package.
For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!