Composition API patterns that survive production

The Composition API shines when your components stop being junk drawers. In production code, the win is not shorter files — it is predictable boundaries between UI, state, and effects.

One composable, one job

I split by capability, not by file count. A composable should answer one question: fetch projects, animate a counter, or sync scroll state — not all three.

export function useProjects() {
  const projects = computed(() => portfolioProjects);
  function getBySlug(slug: string) {
    return portfolioProjects.find((p) => p.slug === slug);
  }
  return { projects, getBySlug };
}

Lifecycle belongs at the edge

onMounted and watchers live in the component or in a composable that explicitly documents client-only behavior. GSAP contexts, ResizeObserver, and matchMedia checks stay scoped and reverted on unmount.

• Return plain refs and computeds — avoid leaking raw DOM nodes unless necessary.
• Name composables useX so intent is obvious in <script setup>.
• Keep template logic dumb; push branching into computed properties.