Composables

Reusable Composables

Composables encapsulate stateful logic using Composition API.

Name them useX and return a clear object/tuple API.

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function onMove(e) { x.value = e.pageX; y.value = e.pageY }
  onMounted(() => window.addEventListener('mousemove', onMove))
  onUnmounted(() => window.removeEventListener('mousemove', onMove))
  return { x, y }
}

Mouse position composable with cleanup.

Design

accept maybe refs, cleanup always, small scope

• Prefer Composition API + script setup.
• Use computed for derived UI.
• Keep side effects intentional.
• Practice in a small Vite app.

Composables Cheatsheet

Quick reference for patterns covered in this lesson.

Side Effects

Register lifecycle hooks only while in setup context.

Common Mistakes

• Secret instance dependencies.
• No cleanup.

Key Takeaways

• Composables is important in Vue apps.
• Practice in SFCs.
• Prefer clear naming.
• Check Vue docs for details.