VueUse — Essential Vue Composition Utilities

Introduction

VueUse is a collection of composition API utility functions for Vue 3. It provides ready-made composables for common tasks like tracking mouse position, managing localStorage, debouncing inputs, and detecting network status. The library follows Vue's reactivity model so every returned value is a reactive ref you can use directly in templates.

What VueUse Does

• Provides 200+ composable functions organized by category: browser, sensors, state, animation, network, and more
• Wraps browser APIs (IntersectionObserver, ResizeObserver, Clipboard, Geolocation) in reactive composables
• Offers SSR-compatible implementations that safely degrade when window or document is unavailable
• Includes add-on packages for Firebase, RxJS, motion, and head management
• Supports both Vue 3 and Nuxt 3 with auto-import integration

Architecture Overview

Each composable is a standalone function that creates reactive refs and watchers internally. Functions follow a consistent pattern: accept an optional configuration object and return reactive state plus control methods. The library uses the Vue reactivity system (ref, computed, watch) exclusively, with no external state management dependency. Tree-shaking ensures only imported composables are bundled.

Self-Hosting & Configuration

• Install @vueuse/core as a dependency; no global plugin registration needed
• Import individual composables directly in your setup function or script setup
• Configure Nuxt auto-imports via the @vueuse/nuxt module for zero-import usage
• Each composable accepts an options object for customization (throttle intervals, target elements, initial values)
• Use the @vueuse/integrations package for third-party library wrappers (Axios, Draggable, QRCode)

Key Features

• Fully tree-shakeable: each composable is an independent ES module
• TypeScript-first with complete type inference for all return values
• Configurable via MaybeRef parameters: pass static values or reactive refs interchangeably
• Directive versions available for common composables like vElementVisibility and vOnClickOutside
• Interactive documentation with live playground for every function

Comparison with Similar Tools

• React Hooks (custom) — similar concept but Vue composables leverage Vue's fine-grained reactivity for automatic dependency tracking
• @tanstack/vue-query — focused on async data fetching; VueUse covers a broader utility surface
• Lodash — general-purpose utilities without reactivity; VueUse functions return reactive state
• vue-demi — compatibility layer that VueUse itself uses; not a utility collection
• Pinia — global state management; VueUse composables are component-scoped utilities

FAQ

Q: Does VueUse work with Vue 2? A: VueUse v9 and earlier supported Vue 2 via vue-demi. Current versions target Vue 3 only.

Q: Will importing VueUse bloat my bundle? A: No. Each composable is independently importable and tree-shaken. Importing one function adds only that function's code.

Q: Can I use VueUse composables outside of components? A: Yes, within any Vue effectScope, including Pinia stores and custom composables.

Q: How does it handle SSR? A: Browser-dependent composables return safe defaults during server rendering and activate on client mount.

Sources

• https://github.com/vueuse/vueuse
• https://vueuse.org