VueUse

VueUse is an open-source collection of over 200 composable utility functions built on the Vue 3 Composition API. It wraps everyday browser and application concerns — reactive state persistence, element sizing, mouse and keyboard tracking, network status, clipboard access, and dozens more — into small, typed, tree-shakeable functions that snap directly into a component’s setup.

Written entirely in TypeScript and shipped SSR-friendly, VueUse lets teams reach for a battle-tested composable instead of hand-rolling reactive logic and effect cleanup for each feature. Optional add-ons extend the core into router, RxJS, Firebase, Electron, and Nuxt integrations.

What You Get

• 200+ tree-shakeable composables covering state, elements, sensors, network, browser, and animation concerns
• First-class TypeScript types with full TS Docs on every function
• SSR-friendly implementations that degrade safely on the server
• Optional add-ons for Vue Router, RxJS, Firebase, Electron, and a dedicated Nuxt module
• Interactive documentation and live demos at vueuse.org, plus CDN builds for no-bundler usage

Common Use Cases

• Persisting reactive state to localStorage or sessionStorage with useStorage
• Tracking pointer, scroll, resize, and intersection state without manual event listeners
• Reading device and browser capabilities such as battery, clipboard, geolocation, and dark-mode preference
• Debouncing and throttling reactive values and callbacks
• Building responsive UI logic with breakpoint and element-size composables

Under The Hood

Architecture — VueUse is a pnpm/turbo monorepo whose @vueuse/core package is organized one directory per composable (134+ folders such as useMouse, useStorage, useBreakpoints), each re-exported from a flat packages/core/index.ts. Core builds on two internal packages — @vueuse/shared (reactivity primitives and utility helpers) and @vueuse/metadata (generated function metadata) — while optional add-ons (router, rxjs, firebase, electron, nuxt, integrations) live as sibling packages so the core stays dependency-light. This one-function-per-module layout is what makes the library fully tree-shakeable.

Tech Stack — Written ~86% in TypeScript with Vue single-file components for demos, targeting Vue 3.5+ as a peer dependency. It is bundled with tsdown, linted via a flat eslint.config.js, styled in demos with UnoCSS, tested with Vitest, and orchestrated across the workspace by Turbo. CDN IIFE builds (index.iife.min.js) are published for no-bundler usage.

Code Quality — Test coverage is strong and colocated: roughly 121 *.test.ts files sit beside the 134 composables, so most public functions ship with unit tests. Consistent naming (use*/on*), per-function README files, and a _configurable.ts convention for shared options give the codebase a uniform, self-documenting shape.

API Design — The developer experience is a standout: every utility is a small composable that returns reactive refs, cleans up its own effects on scope disposal, and accepts a consistent configurable-options object. Full TypeScript inference, TS Docs on the public surface, and the interactive vueuse.org docs with live demos keep boilerplate near zero — a feature is typically one import and one call.