VueUse Composables

Discover and leverage VueUse composables for common reactive patterns and browser API integrations.

When to Use

DO USE when:

• User needs reactive browser APIs (clipboard, geolocation, etc.)

• Working with element interactions (click outside, resize, scroll)

• State persistence (local/session storage)

• Mouse/keyboard/touch interactions

• Media queries and breakpoints

• Animation and timing utilities

• Network status, battery, device sensors

• Advanced reactivity patterns (debounce, throttle, async)

DO NOT USE when:

• Basic Vue reactivity is sufficient (ref, computed, watch)

• Nuxt-specific features (use Nuxt docs)

• UI comp- UI comp- ed (use Nuxt UI)

• Custom business logic (write composables)

Common Use Cases

State Persi##ence

• useLocalStorage/useSessionStorage: Reactive storage with auto-sync

• useStorage: Generic storage with custom engines

Browser APIs

• useClipboard: Copy to clipboard with state

• useGeolocation: Reactive user location

• useColorMode/useDark: Dark mode with system preference

• useMediaQuery/useBreakpoints: Responsive helpers

Element Interactions

• onClickOutside: Detect clicks outside element

• useElementSize: Reactive element dimensions

• useElementVisibility: Track viewport visibility

• useIntersectionObserver: Advanced visibility detection

• useResizeObserver: Watch element size changes

• useDraggable: Make elements draggable

Mouse & Keyboard

• useMouse: Track mouse position

• useMagicKeys: Keyboard shortcuts

• onKeyStroke: Listen for specific keys

• onLongPress: Detect long press events

Network & Connectivity

• useOnline: Network status

• useNetwork: Detailed network info

• useWebSocket: Reactive WebSocket

Animation & Timing

• useInterval/useIntervalFn: Intervals with controls

• useTimeout/useTimeoutFn: Timeouts with controls

• useTransition: Smooth number transitions

• useRafFn: RequestAnimationFrame helper

Advanced Reactivity

• watchDebounced/watchThrottled: Debounced/thrott- watchDebounced/watchThrottled: Debounce Debounced/throttled refs

• until: Promise-based watch

• whenever: Watch for truthy values

Best Practices

• Auto-Import: All composables are auto-imported with @vueuse/nuxt

• SSR: Most composables handle SSR gracefully - check isSupported

• Type Safety: Fully typed - import types when needed

• Cleanup: Automatic cleanup on unmount

• Naming: Be aware of conflicts (Nuxt useFetch ≠ VueUse useFetch)

Documentation

• Docs: https://vueuse.org/

• Functions: https://vueuse.org/functions.html

• Playground: https://playground.vueuse.org/