Vue Mixins Explained — Reusable Component Logic

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Vue Mixins Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue mixins are reusable blocks of component options (data, methods, lifecycle hooks) that can be merged into multiple components, enabling cross-cutting code reuse.

What You'll Learn

Creating and applying mixins
Merge strategies for conflicting options
Global mixins
Mixin limitations
Mixins vs composables

Why It Matters

Mixins were the primary code reuse pattern before the Composition API. Understanding mixins helps maintain legacy Vue 2 applications and migrate to modern patterns.

// mixins/formMixin.js
export const formMixin = {
  data() {
    return {
      isSubmitting: false,
      errors: {},
    };
  },
  methods: {
    async submitForm(submitFn) {
      this.isSubmitting = true;
      this.errors = {};
      try {
        await submitFn();
      } catch (err) {
        if (err.response?.data?.errors) {
          this.errors = err.response.data.errors;
        }
      } finally {
        this.isSubmitting = false;
      }
    },
    clearErrors() {
      this.errors = {};
    },
  },
};

<template>
  <form @submit.prevent="submitForm(submitData)">
    <input v-model="email" />
    <span v-if="errors.email">{{ errors.email }}</span>
    <button :disabled="isSubmitting">{{ isSubmitting ? "Saving..." : "Save" }}</button>
  </form>
</template>

<script>
import { formMixin } from "../mixins/formMixin";

export default {
  mixins: [formMixin],
  data() { return { email: "" }; },
  methods: {
    async submitData() {
      await api.updateEmail(this.email);
    },
  },
};
</script>

Expected output: The component inherits isSubmitting and errors state, with submitForm managing loading and error states for any async submission.

← Previous Vue HTTP Requests with Axios — Complete Guide Next → Vue Custom Directives Explained — Extending HTML

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Vue