Why Composable accepting parameters in Vue? - Purpose & Use Cases

The Big Idea

Discover how a small change lets you reuse code smarter and faster!

The Scenario

Imagine you want to reuse a piece of logic in several parts of your Vue app, but each time with slightly different settings or data.

You try copying the same code everywhere and changing values manually.

The Problem

Copying code leads to mistakes and makes your app hard to maintain.

If you want to change the logic, you must update every copy separately, which is slow and error-prone.

The Solution

Composable functions that accept parameters let you write the logic once and customize it easily wherever you use it.

This keeps your code clean, reusable, and easy to update.

Before vs After

✗ Before

import { ref } from 'vue';
function useCounter() { let count = ref(0); function increment() { count.value++ } return { count, increment } } // duplicated with manual changes

✓ After

import { ref } from 'vue';
function useCounter(start = 0) { let count = ref(start); function increment() { count.value++ } return { count, increment } } // reusable with different starts

What It Enables

You can create flexible, reusable logic blocks that adapt to different needs without rewriting code.

Real Life Example

Building a form input handler that works for text, numbers, or dates by passing the input type as a parameter.

Key Takeaways

Manual code duplication is slow and risky.

Composable parameters make logic reusable and customizable.

This leads to cleaner, easier-to-maintain Vue apps.