Composable vs mixin comparison in Vue - Hands-On Comparison

Composable vs Mixin Comparison in Vue 3

📖 Scenario: You are building a simple Vue 3 app to understand how to share logic between components using two different methods: mixins and composables. This will help you see how Vue 3's new Composition API improves code reuse and clarity compared to the older mixin approach.

🎯 Goal: Create two Vue components that share the same counter logic. One uses a mixin, and the other uses a composable function. You will see how both work and compare their structure.

📋 What You'll Learn

Create a mixin with a counter data property and an increment method

Create a composable function that returns a counter ref and an increment function

Create a Vue component that uses the mixin to display and increment the counter

Create a Vue component that uses the composable to display and increment the counter

💡 Why This Matters

🌍 Real World

Sharing logic like counters, timers, or form validation across multiple Vue components is common in real apps. Understanding mixins and composables helps you write cleaner, reusable code.

💼 Career

Vue developers often need to refactor legacy mixin code to composables for maintainability and to use modern Vue 3 features effectively.

1

Create a mixin with counter logic

Create a Vue mixin called counterMixin that has a data function returning an object with a count property set to 0, and a method called increment that increases count by 1.

Vue

# Your code here

Need a hint?

Remember, a mixin is an object with data and methods properties.

2

Create a composable function with counter logic

Create a composable function called useCounter that uses Vue's ref to create a count variable initialized to 0. Return an object with count and an increment function that increases count.value by 1.

Vue

export const counterMixin = {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

// Your code here

Need a hint?

Use Vue's ref to create reactive state inside the composable.

3

Create a Vue component using the mixin

Create a Vue component called MixinCounter that uses the counterMixin. In the template, display the count and add a button that calls increment when clicked.

Vue

import { ref } from 'vue';

export const counterMixin = {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

// Your code here

Need a hint?

Use the mixins option to include the mixin in the component.

4

Create a Vue component using the composable

Create a Vue component called ComposableCounter that uses the useCounter composable inside the setup function. In the template, display the count and add a button that calls increment when clicked.

Vue

import { ref } from 'vue';

export const counterMixin = {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

export default {
  name: 'MixinCounter',
  mixins: [counterMixin],
  template: `
    Mixin count: {{ count }}
    Increment
  `
};

// Your code here

Need a hint?

Use the setup function to call the composable and return its values for the template.