Composable vs mixin comparison in Vue

Introduction

Composables and mixins help you reuse code in Vue components. They make your code cleaner and easier to manage.

You want to share logic between multiple components.

You need to organize code by feature instead of by component.

You want to avoid repeating the same code in many places.

You want better control over code reuse and avoid conflicts.

You want to write easier-to-understand and maintainable Vue apps.

Syntax

Vue

/* Mixin example */
export const myMixin = {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};

/* Composable example */
import { ref } from 'vue';
export function useCounter() {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  return { count, increment };
}

Mixins are objects with options like data and methods.

Composables are functions that use Vue's reactive features and return state and functions.

Examples

This component uses the mixin to get count and increment method.

Vue

/* Using a mixin in a component */
import { myMixin } from './mixins';
export default {
  mixins: [myMixin],
  mounted() {
    this.increment();
    console.log(this.count);
  }
};

This component calls the composable function inside setup and uses its state and methods.

Vue

/* Using a composable in a component */
import { useCounter } from './composables';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const { count, increment } = useCounter();
    increment();
    console.log(count.value);
    return { count, increment };
  }
});

Sample Program

This Vue component uses a composable to manage a toggle state. It toggles the state twice and logs the final value.

Vue

<script setup>
import { ref } from 'vue';

// Composable function
function useToggle() {
  const isOn = ref(false);
  function toggle() {
    isOn.value = !isOn.value;
  }
  return { isOn, toggle };
}

// Using composable
const { isOn, toggle } = useToggle();

// Toggle twice
toggle();
toggle();

console.log(isOn.value);
</script>

Important Notes

Mixins can cause name conflicts if multiple mixins have the same property names.

Composables avoid conflicts by using local variables and returning only what you want.

Composables work better with TypeScript and modern Vue features.

Summary

Mixins are older and use Vue options like data and methods.

Composables are functions that use Vue's Composition API for better code reuse.

Prefer composables for clearer, safer, and more flexible code sharing.

Practice

1. Which statement best describes the main difference between a mixin and a composable in Vue?

easy

A. Mixins are functions, and composables use Vue options like data and methods.

B. Composables are only used in Vue 2, mixins only in Vue 3.

C. Mixins and composables are exactly the same in Vue.

D. Mixins use Vue options like data and methods, while composables are functions using the Composition API.

Solution

1. Step 1: Understand mixin structure

   Mixins use Vue's Options API with properties like data, methods, and lifecycle hooks.

2. Step 2: Understand composable structure

   Composables are plain functions that use Vue's Composition API to share reactive logic.

3. Final Answer:

   Mixins use Vue options like data and methods, while composables are functions using the Composition API. -> Option D

4. Quick Check:

   Mixin = Options API, Composable = Composition API [OK]

Hint: Mixins use options; composables are functions with Composition API [OK]

Common Mistakes:

• Confusing mixins as functions
• Thinking composables use Options API
• Believing mixins and composables are identical

2. Which of the following is the correct syntax to define a composable function in Vue 3?

easy

A. function useCounter() { this.count = 0; }

B. export function useCounter() { const count = ref(0); return { count }; }

C. export default { methods: { useCounter() { return 0; } } }

D. export const useCounter = { data() { return { count: 0 }; } }

Solution

1. Step 1: Identify composable function pattern

   Composable functions are plain functions that return reactive state or methods, often prefixed with 'use'.

2. Step 2: Check syntax correctness

   export function useCounter() { const count = ref(0); return { count }; } defines a function returning a reactive ref, which matches composable pattern.

3. Final Answer:

   export function useCounter() { const count = ref(0); return { count }; } -> Option B

4. Quick Check:

   Composable = function returning reactive state [OK]

Hint: Composable is a function returning reactive refs or state [OK]

Common Mistakes:

• Using object syntax instead of function
• Not returning reactive state
• Using 'this' inside composable function

3. Given this mixin and component code, what will be logged when the button is clicked?

const myMixin = {
  data() { return { count: 0 }; },
  methods: { increment() { this.count++; console.log(this.count); } }
}

export default {
  mixins: [myMixin],
  template: `Click`
}

medium

A. Logs 1, 2, 3 on each click

B. Logs 0 every time

C. Throws an error because count is undefined

D. Logs NaN on each click

Solution

1. Step 1: Understand mixin data and methods

   The mixin provides a reactive count starting at 0 and an increment method that increases count and logs it.

2. Step 2: Check component usage

   The component uses the mixin, so count and increment are available. Each click calls increment, increasing count by 1 and logging it.

3. Final Answer:

   Logs 1, 2, 3 on each click -> Option A

4. Quick Check:

   Mixin data + method increments count [OK]

Hint: Mixin data is reactive and shared in component [OK]

Common Mistakes:

• Assuming count resets each click
• Thinking count is undefined
• Confusing mixin with composable behavior

4. Identify the error in this composable usage inside a Vue component:

import { ref } from 'vue';

function useTimer() {
  const time = ref(0);
  setInterval(() => time.value++, 1000);
  return { time };
}

export default {
  setup() {
    const timer = useTimer;
    return { timer };
  },
  template: `
{{ timer.time }}
`
}

medium

A. setInterval should be inside setup, not composable

B. ref is not imported correctly

C. The composable function is not called; should be useTimer()

D. template syntax is invalid

Solution

1. Step 1: Check composable invocation

   The composable useTimer is assigned without parentheses, so timer is a function reference, not the returned object.

2. Step 2: Understand impact on template

   Since timer is a function, accessing timer.time is undefined, causing template to fail or show nothing.

3. Final Answer:

   The composable function is not called; should be useTimer() -> Option C

4. Quick Check:

   Call composable as function: useTimer() [OK]

Hint: Call composable with () to get returned state [OK]

Common Mistakes:

• Forgetting parentheses when calling composable
• Moving setInterval outside composable unnecessarily
• Misreading template syntax

5. You want to share reactive state and methods between multiple components in Vue 3. Which approach is better and why?

Choose the best option and explain why.

hard

A. Composables share reactive logic clearly and safely with better TypeScript support.

B. Mixins share data and methods but can cause naming conflicts and unclear code.

C. Copy-pasting code is simple but leads to maintenance problems.

D. Global variables break reactivity and make debugging hard.

Solution

1. Step 1: Evaluate mixins drawbacks

   Mixins can cause naming conflicts and make code harder to understand because they merge properties invisibly.

2. Step 2: Evaluate composables benefits

   Composables are explicit functions that return reactive state and methods, improving clarity, reusability, and TypeScript support.

3. Step 3: Consider other options

   Copy-pasting duplicates code, and global variables break Vue's reactivity system.

4. Final Answer:

   Composables share reactive logic clearly and safely with better TypeScript support. -> Option A

5. Quick Check:

   Composable = clear, safe, reusable logic [OK]

Hint: Prefer composables for clear, reusable reactive logic [OK]

Common Mistakes:

• Choosing mixins despite conflicts
• Ignoring reactivity with global variables
• Thinking copy-paste is maintainable