Why Composable for API calls (useFetch pattern) in Vue? - Purpose & Use Cases

The Big Idea

What if you could write your API fetch code once and never worry about repeating it again?

The Scenario

Imagine you have to fetch data from an API in multiple parts of your Vue app. You write the same fetch code again and again inside each component.

The Problem

Copying fetch logic everywhere makes your code messy, hard to update, and easy to break. If the API changes, you must fix every component manually.

The Solution

Composable functions like useFetch let you write the fetch logic once and reuse it anywhere. This keeps your code clean, consistent, and easy to maintain.

Before vs After

✗ Before

fetch('https://api.example.com/data').then(res => res.json()).then(data => { this.data = data })

✓ After

const { data, error } = useFetch('https://api.example.com/data')

What It Enables

You can easily share and manage API calls across your app with less code and fewer bugs.

Real Life Example

In a shopping app, you fetch product lists, user info, and order history using the same useFetch composable, making updates simple and fast.

Key Takeaways

Manual API calls repeated in components cause clutter and errors.

Composable useFetch centralizes fetch logic for reuse.

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