# VueUse — Essential Vue Composition Utilities

> A collection of 200+ composable utility functions for Vue 3 covering sensors, state, browser APIs, animation, and more.

## Install

Save as a script file and run:

# VueUse — Essential Vue Composition Utilities

## Quick Use
```bash
npm install @vueuse/core
```
```vue
<script setup>
import { useMouse, useDark, useToggle } from '@vueuse/core'
const { x, y } = useMouse()
const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>
```

## 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

---
Source: https://tokrepo.com/en/workflows/asset-1adca2d0
Author: Script Depot