What is a mixin?
Vue 3 note (2026): For new Vue 3 code, prefer composables (Composition API functions like useXxx()) over mixins. Mixins still work with the Options API but make dependencies less explicit and are easy to collide.
|
1 2 3 4 5 6 7 8 9 |
// composable example (Vue 3) import { ref, onMounted } from "vue"; export function useCounter() { const count = ref(0); const inc = () => { count.value++; }; onMounted(() => { /* optional setup */ }); return { count, inc }; } |
Mixins are “reusable” pieces of code that can be used multiple times in any Vue component or instance. A Vue.js mixin is actually an object that can contain all the properties as well as the options object of the instance/component: data, methods, computed…
“Mixins” are used for:
- Creation of common properties (methods, data…), which are used in different components and thus enable compliance with the DRY (“Don’t Repeat Yourself”) principle.
- When creating plugins that need to modify an existing Vue instance, because they can easily add new functionality.
The domain of the mixin
A mixin is integrated into an instance (component) by embedding a copy of the code written in the mixin into the component. This leads to the conclusion that the code that came into the component from the mixin is completely separate and independent both from the mixin itself and from the code embedded in the other components.
Syntax for using mixins
Creating a mixin
In order to create a mixin, we need to define a new variable that will represent it.
Example
|
1 2 3 4 5 6 7 |
var nazivMixina = { methods: { poruka () { console.log('Message added in mixin!') } } } |
If we are able to use modules, it is preferable to extract the contents of the mixin into a new file (module):
Example – nameMixina.js
|
1 2 3 4 5 6 7 |
export const nazivMixina = { methods: { poruka () { console.log('Message added in mixin!') } } } |
Integrating a mixin into a component
Integrating a mixin into a component is simple, and is done using a property named “mixin”. The mixin property is an array of all the mixin names we use in the given component:
|
1 2 3 4 5 6 7 |
new Vue({ el: "#app", data: { message: "Some message" } mixins: [mixin] }) |
After the inserted mixin, the Vue instance gets a new functionality with the hello() method.
Rules for mixing/merging properties
When a component uses a mixin, all properties from the mixin will be “mixed” (“fused”) with the component’s existing properties. In case of conflict, the property defined in the component takes precedence over the property with the same name from the mixin. This happens because “mixin” hooks are executed before component hooks, so properties from components “step” properties with the same name from mixins.
Example
This example shows how to “mix” the properties from the inserted mixin and the existing properties in the component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
var mixin = { data: function () { return { message: 'message from mixin', svojstvoMixina: 'abc' } } } new Vue({ mixins: [mixin], data: function () { return { message: 'message from the component', svojstvoKomponente: 'def' } }, created: function () { console.log(this.$data) // Returns: { message: "message from component", propertyComponent: "def", propertyMixin: "abc" } } }) |
Since the property named “message” exists in both the mixin and the instance, Vue.js prioritizes the instance, so the message: “message from component” property will remain unchanged, while the property from the mixin named “Mixin property” will become the new instance property.
Example
In this example, based on the sequence of messages in the console, it can be seen that the mixin is executed before the component, and therefore the “sayHello()” method from the component is executed last and therefore “steps on” the already loaded method with the same name from the mixin.
Global mixin
There is a possibility to create a so-called A “global mixin”, which is automatically added to EVERY component or instance. Automatic addition of components means that after defining a global mixin, no additional code is needed to insert into the component, because Vue.js does it itself in the background. Global mixins are most often used when creating “third party” plugins, because they simply insert code into the application.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) new Vue({ myOption: 'hello!' }) |
NOTE:
Be very careful when using the global mixin because it is automatically added to EVERY INSTANCE AND COMPONENT including “third party” components.
Example
In this example, thanks to the global mixin, 4 messages are printed in the console “This is sent from the mixin, and is printed within every component and instance”. One for the main instance and another 3 for the components. Execution order:
- Main instance
- App component
- Chidl1 component
- Child2 component