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.
