Mixins

Mixins

Mixins let you share reusable logic across multiple components. If two or more components share the same data property, method, or computed property, extract it into a mixin.

Creating a Mixin

// mixins/searchMixin.js
export default {
    data() {
        return {
            search: ''
        };
    },
    computed: {
        filteredItems() {
            return this.items.filter(item => {
                return item.title.toLowerCase().includes(this.search.toLowerCase());
            });
        }
    }
};

Using a Mixin

import searchMixin from '../mixins/searchMixin';

export default {
    mixins: [searchMixin],
    data() {
        return {
            items: []  // The mixin's filteredItems uses this
        };
    },
    created() {
        // fetch items...
    }
};

The mixin's data, computed, methods, and hooks are merged into the component. If there is a conflict, the component's own options take priority.

Merge Strategy

Option	How It Merges
data	Deep merge — component values override mixin values
methods, computed	Component methods override mixin methods with the same name
Lifecycle hooks	Both run — mixin hook runs first, then component hook

Key Takeaways

• Mixins share reusable data, methods, computed, and hooks across components
• Use the mixins array to include one or more mixins in a component
• Component options override mixin options on conflict; lifecycle hooks are merged (both run)
• Use mixins for cross-cutting concerns like search, pagination, or validation