Understanding Vue Composables

1. What is a Composable?

In Vue 3, a composable is a stateful function that encapsulate reusable reactive logic.

A composable typically:

• Uses Vue reactivity (ref, reactive, computed, watch)




• Manages state




• Can be reused across components




• Usually follows the naming convention useSomething()

Example:

// useCounter.js

import { ref } from 'vue'



export function useCounter() {

  const count = ref(0)



  function increment() {

    count.value++

  }



  return { count, increment }

}

2. What is NOT a Composable?

If a function does not manage reactive state, then it is not a composable.

These should be utility functions

Example:

export function formatDate(date) {

  return new Date(date).toLocaleDateString()

}

This function:

• Has no reactive state




• Is pure logic

So it shouldn't live in composables/

Mixins vs Store vs Composables (Vue)

1. Mixins

Mixins were mainly used in Vue 2 to reuse component logic.

They allow you to inject properties, methods, lifecycle hooks, and data into components.

Characteristics

Reuse logic between components

Automatically merges into component options

Problems with Mixins

Mixins have several issues:

⚠️Name collisions

If a component and mixin define the same method or property.

⚠️ Implicit dependencies

Hard to know where data or methods come from.

Because of these issues, Vue 3 recommends composables instead of mixins.

2. Composables

Composables are functions that encapsulate reusable reactive logic

Characteristics

✅ Explicit imports

✅ Reusable reactive logic

✅ No name collisions

✅ Clear data origin

✅ Better TypeScript support

Composables are the modern replacement for mixins.

3. Store

The store is used for global shared state across the entire application.

🌍 Global state management

🔁 Shared between many components

📦 Centralized data source

Simple Rule of Thumb

Use Composables ⚙️

→ When reusing reactive logic across components

Use Store 🗂

→ When state must be shared globally

Avoid Mixins ⚠️

→ Legacy pattern replaced by composables