- name
- vueuse-composables
- description
- Find and use VueUse composables for common functionality like mouse tracking, local storage, element detection, breakpoints, and browser APIs. Use when users need reactive utilities beyond basic Vue.
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/