VueUse Composable Patterns

Quick Guide: VueUse provides 250+ composable functions for Vue 3 that wrap browser APIs, sensors, network, state, and component logic into reactive composables. Import individual functions from @vueuse/core for tree-shaking. All composables return reactive refs and follow Vue Composition API conventions. Use useLocalStorage for persistent state, useFetch for reactive HTTP, useIntersectionObserver for visibility detection, createGlobalState for shared state, and useVModel for two-way binding helpers. Always call composables in <script setup> or setup() synchronously. Clean up is automatic via Vue's lifecycle.

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST call VueUse composables synchronously inside <script setup> or setup() -- NEVER inside async callbacks, setTimeout, or conditional blocks)

(You MUST use shallowRef instead of ref for large objects/arrays in VueUse composables to avoid deep reactivity overhead)

(You MUST handle SSR by checking typeof window !== "undefined" or using VueUse's built-in SSR-safe composables -- browser APIs crash during server rendering)

(You MUST import individual composables from @vueuse/core -- NEVER use import * as vueuse which defeats tree-shaking)