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) or useStorage('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