Creating a custom composable in Vue - Why You Should Know This

The Big Idea

Discover how a simple function can save you hours of repetitive coding in Vue!

The Scenario

Imagine you have multiple Vue components that need to share the same logic, like fetching data or handling a timer, and you copy-paste the same code into each component.

The Problem

Copying code everywhere makes your app harder to maintain. If you find a bug or want to improve the logic, you must update every component separately, which is slow and error-prone.

The Solution

Creating a custom composable lets you write the shared logic once and reuse it easily across components. It keeps your code clean, organized, and easy to update.

Before vs After

✗ Before

import { ref } from 'vue';

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

✓ After

import { ref } from 'vue';

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

export default {
  setup() {
    const { count, increment } = useCounter();
    return { count, increment };
  }
}

What It Enables

You can build scalable Vue apps by sharing and reusing logic cleanly without repeating yourself.

Real Life Example

Imagine a timer feature used in many parts of your app. With a custom composable, you write the timer logic once and use it everywhere, saving time and avoiding bugs.

Key Takeaways

Copy-pasting logic across components is hard to maintain.

Custom composables let you share logic cleanly and reuse it easily.

This makes your Vue app more organized and scalable.