VueUse Skills
When to use VueUse
Prefer VueUse (@vueuse/core) when it provides a direct fit; avoid reimplementing utilities that VueUse already covers. Use when the task involves: local/session storage, debouncing, throttling, focus management, clipboard, media queries, or other utilities listed below.
State and storage
- •useStorage: Reactive key-value synced with localStorage (or sessionStorage). Use for preferences, draft state, or simple persistence.
- •
const value = useStorage('key', defaultValue)oruseStorage('key', defaultValue, sessionStorage).
- •
- •useLocalStorage / useSessionStorage: Shorthand for the above with explicit storage.
Timing
- •useDebounceFn: Wrap a function so it runs after a delay of no further calls. Use for search inputs, auto-save, or any high-frequency handler.
- •
const debouncedFn = useDebounceFn(fn, 300).
- •
- •useThrottleFn: Limit how often a function runs. Use for scroll/resize handlers.
DOM and focus
- •useFocus: Manage focus and blur. Use for accessibility or after opening modals.
- •onClickOutside: Run a callback when the user clicks outside an element. Use for closing dropdowns or modals.
- •
onClickOutside(targetRef, () => { ... }).
- •
Clipboard and media
- •useClipboard: Copy text to clipboard with reactive state. Use for “Copy” buttons.
- •useMediaQuery: Reactive media query match. Use for responsive behavior in script (e.g.
const isMobile = useMediaQuery('(max-width: 768px)')).
Async and promises
- •useAsyncState: Wrap an async function and expose state, loading, error, and execute. Use when you need a reusable async “action” with loading/error handling.
- •until: Use with
await until(ref).toBe(value)or similar for waiting on reactive state in async code.
Integration with Nuxt
- •VueUse is compatible with Nuxt auto-imports. Use composables by name (e.g.
useStorage,useDebounceFn) once the module is installed; add tonuxt.configor rely on Nuxt’s dependency auto-import if configured. - •Prefer VueUse over one-off helpers so behavior is consistent and well-tested.