Composable

ELI5 — The Vibe Check

Composables are Vue's version of React hooks — reusable functions that bundle reactive state and logic together. Instead of copying the same fetch logic into 10 components, you write one useFetch composable and share it everywhere. Work smarter, not harder.

Real Talk

Composables are functions in Vue's Composition API that encapsulate and reuse stateful logic. They leverage Vue's reactivity system (ref, computed, watch) and lifecycle hooks. By convention they start with 'use'. Equivalent to React's custom hooks.

Show Me The Code

// composables/useFetch.js
import { ref } from 'vue';

export function useFetch(url) {
  const data = ref(null);
  const loading = ref(true);

  fetch(url)
    .then(r => r.json())
    .then(d => { data.value = d; loading.value = false; });

  return { data, loading };
}

When You'll Hear This

"Extract the auth logic into a useAuth composable." / "Composables are the Composition API equivalent of mixins but without the naming collision hell."