# vueuse/vueuse

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/vueuse-vueuse).**

22,092 stars · 2,866 forks · TypeScript · mit

## Links

- GitHub: https://github.com/vueuse/vueuse
- Homepage: https://vueuse.org
- awesome-repositories: https://awesome-repositories.com/repository/vueuse-vueuse.md

## Topics

`composable` `utility-library` `vue` `vue3` `vueuse`

## Description

This project is a comprehensive collection of modular, reactive functions designed to streamline the development of user interfaces. It serves as a toolkit for managing application state, wrapping native browser hardware and system features, and encapsulating common logic patterns into reusable units. By binding asynchronous data sources, browser events, and system properties to component state, it provides a unified framework for building interactive web and desktop applications.

The library distinguishes itself through its focus on composition and lifecycle management, allowing developers to handle complex side effects and state synchronization with minimal boilerplate. It offers fine-grained control over reactive updates, including support for debouncing, throttling, and custom flush timing, while automatically managing the cleanup of event listeners and background tasks to prevent memory leaks. The architecture supports build-time auto-importing and dependency injection, enabling developers to override browser globals for testing or isolated environments.

Beyond core state management, the project provides extensive capabilities for monitoring user interactions, tracking DOM element changes, and managing persistent data storage. It includes utilities for declarative animations, audio playback, and desktop environment interfacing, ensuring that system-level tasks are handled through consistent reactive bindings. The library is designed to integrate seamlessly into existing workflows, offering tools for both standard web development and cross-platform desktop applications.

## Tags

### User Interface & Experience

- [Compositional Primitives](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/ecosystem-specific-libraries/vue-ui-libraries/compositional-primitives.md) — Provides a library of modular, reactive functions that encapsulate common logic patterns for the composition API.
- [Reactive State Management](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management.md) — Synchronizes UI components with application data state using reactive bindings and automatic change tracking.
- [Reactive State Management Libraries](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management-libraries.md) — Provides libraries for managing application state using signal-based reactivity and dependency tracking. ([source](https://vueuse.org/functions))
- [Component Composition Primitives](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-composition/component-composition-primitives.md) — Encapsulates framework primitives into modular functions to provide reusable state management and side-effect handling.
- [Declarative Animation Libraries](https://awesome-repositories.com/f/user-interface-experience/declarative-animation-libraries.md) — Provides tools that allow defining visual transitions and states through properties or configuration rather than imperative DOM manipulation. ([source](https://vueuse.org/add-ons))
- [Declarative Animations](https://awesome-repositories.com/f/user-interface-experience/declarative-animations.md) — Provides declarative, property-based animation utilities that drive visual changes through reactive state.
- [Interaction Handling](https://awesome-repositories.com/f/user-interface-experience/interaction-handling.md) — Captures complex input events like gestures and keyboard shortcuts to simplify logic for interactive interface elements. ([source](https://vueuse.org/functions))
- [Component Logic Patterns](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-logic-patterns.md) — Simplifies component lifecycle management and data binding using safe wrappers for standard framework primitives. ([source](https://vueuse.org/functions))
- [External State Integrations](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/reactivity-systems/external-state-integrations.md) — Integrates third-party logic and external state into the reactive workflow to maintain consistent application state management. ([source](https://vueuse.org/add-ons))
- [Side Effect Cleanup Utilities](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/reactivity-systems/side-effect-cleanup-utilities.md) — Manages automatic cleanup of event listeners and background tasks when components unmount to prevent memory leaks.
- [URL-Synchronized Navigation](https://awesome-repositories.com/f/user-interface-experience/url-synchronized-navigation.md) — Tracks route parameters and URL fragments to automatically update the user interface when the browser location changes. ([source](https://vueuse.org/add-ons))
- [Scoped Slots](https://awesome-repositories.com/f/user-interface-experience/component-slot-systems/scoped-slots.md) — Provides mechanisms for passing data from child components to parent slot content by binding attributes during rendering. ([source](https://vueuse.org/guide/components))
- [Framework Agnostic UI Logic](https://awesome-repositories.com/f/user-interface-experience/framework-agnostic-ui-logic.md) — Provides framework-agnostic UI logic that enables consistent state management across web and desktop environments.
- [Gesture Interaction Libraries](https://awesome-repositories.com/f/user-interface-experience/gesture-interaction-libraries.md) — Provides utilities for capturing and processing pointer-based interactions like dragging, panning, and tapping. ([source](https://vueuse.org/add-ons))
- [Watcher Execution Strategies](https://awesome-repositories.com/f/user-interface-experience/ui-architecture/reactivity-systems/watcher-execution-strategies.md) — Provides configuration options for when and how watcher callbacks are triggered relative to state changes. ([source](https://vueuse.org/functions))
- [Layout Observers](https://awesome-repositories.com/f/user-interface-experience/interface-element-management/keyed-element-tracking/layout-observers.md) — Monitors DOM element properties such as size and visibility to drive reactive updates based on layout changes. ([source](https://vueuse.org/functions))
- [Reactive Argument Bindings](https://awesome-repositories.com/f/user-interface-experience/reactive-state-management-libraries/reactive-argument-bindings.md) — Allows passing reactive references directly into functions to maintain live data connections between application state and utility logic. ([source](https://vueuse.org/guide/best-practice))
- [System Theme Detection](https://awesome-repositories.com/f/user-interface-experience/system-theme-detection.md) — Provides utilities for identifying and responding to system-level light or dark mode preferences at runtime. ([source](https://cdn.jsdelivr.net/gh/vueuse/vueuse@main/README.md))
- [User Interaction Patterns](https://awesome-repositories.com/f/user-interface-experience/user-interaction-patterns.md) — Captures real-time user input events to drive reactive interface updates based on movement and interaction. ([source](https://cdn.jsdelivr.net/gh/vueuse/vueuse@main/README.md))
- [Reactive Return Destructuring](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/component-framework-features/reactive-prop-destructuring/reactive-return-destructuring.md) — Extracts specific properties from returned objects using standard syntax or converts results into reactive objects. ([source](https://vueuse.org/guide/best-practice))

### Web Development

- [Browser API Integrations](https://awesome-repositories.com/f/web-development/browser-api-integrations.md) — Provides direct access to native browser hardware and system features like clipboard, sensors, and media controls for responsive application interactions. ([source](https://vueuse.org/functions))
- [Browser API Hooks](https://awesome-repositories.com/f/web-development/browser-api-hooks.md) — Exposes native browser hardware and system features as reactive hooks for simplified application integration.
- [Cross-Platform Desktop Frameworks](https://awesome-repositories.com/f/web-development/cross-platform-desktop-frameworks.md) — Provides frameworks for building native-feeling desktop applications for multiple operating systems.
- [Reactive Data Binding](https://awesome-repositories.com/f/web-development/reactive-data-binding.md) — Provides mechanisms that automatically synchronize user interface state with underlying data sources. ([source](https://vueuse.org/functions))
- [Reactive Stream Libraries](https://awesome-repositories.com/f/web-development/reactive-stream-libraries.md) — Binds asynchronous data sources and event sequences to component state to manage complex information flows. ([source](https://vueuse.org/add-ons))
- [Document Head Management](https://awesome-repositories.com/f/web-development/document-head-management.md) — Provides utilities for dynamically updating document metadata and head tags in web applications. ([source](https://vueuse.org/add-ons))

### Development Tools & Productivity

- [Reactive Logic Utilities](https://awesome-repositories.com/f/development-tools-productivity/developer-utilities-libraries/workflow-productivity-enhancers/developer-productivity-utilities/developer-utilities/reactive-logic-utilities.md) — Offers a comprehensive collection of modular, reactive functions to streamline component development and logic encapsulation.
- [Execution Throttling](https://awesome-repositories.com/f/development-tools-productivity/execution-throttling.md) — Provides utilities for controlling the frequency of function execution through debouncing or throttling mechanisms. ([source](https://vueuse.org/guide/config))
- [External Service Integrations](https://awesome-repositories.com/f/development-tools-productivity/external-service-integrations.md) — Connects remote services and data providers into the local reactive system to ensure seamless information flow. ([source](https://vueuse.org/functions))
- [Auto-Import Systems](https://awesome-repositories.com/f/development-tools-productivity/developer-utilities-libraries/workflow-productivity-enhancers/developer-productivity-utilities/developer-experience/editor-automation-plugins/auto-import-systems.md) — Provides a plugin-based system to automatically inject utility functions, removing the need for manual import statements.
- [Relative Date Formatting](https://awesome-repositories.com/f/development-tools-productivity/date-and-time-utilities/relative-date-formatting.md) — Calculates and formats time-based information including countdowns and relative timestamps for accurate interface updates. ([source](https://vueuse.org/functions))

### Software Engineering & Architecture

- [Reactive State Management](https://awesome-repositories.com/f/software-engineering-architecture/reactive-state-management.md) — Implements a toolkit for managing application state and persistence using reactive primitives and lifecycle hooks.
- [Component Composition Patterns](https://awesome-repositories.com/f/software-engineering-architecture/component-composition-patterns.md) — Provides architectural approaches for building complex UI from interchangeable, modular parts. ([source](https://vueuse.org/guide/))
- [Reactive Update Scheduling](https://awesome-repositories.com/f/software-engineering-architecture/reactive-update-scheduling.md) — Offers fine-grained control over reactive update timing, including support for debouncing, throttling, and custom flush timing.
- [Asynchronous Task Managers](https://awesome-repositories.com/f/software-engineering-architecture/asynchronous-task-managers.md) — Manages asynchronous tasks, debouncing, and throttling to maintain application responsiveness without blocking the main thread. ([source](https://vueuse.org/functions))
- [Component Slots](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/ui-architectures-patterns/component-slots.md) — Encapsulates logic into components without visual output, exposing internal state and behavior through scoped slots.
- [Reactive Input Adapters](https://awesome-repositories.com/f/software-engineering-architecture/architectural-design-patterns/state-management/stateful-composables/reactive-input-adapters.md) — Allows utility functions to accept both static values and reactive references to maintain live data connections.
- [Automatic Configuration](https://awesome-repositories.com/f/software-engineering-architecture/automatic-configuration.md) — Resolves and injects utility functions automatically during the build process to eliminate manual import statements. ([source](https://vueuse.org/guide/))
- [Inter-Process Communication Libraries](https://awesome-repositories.com/f/software-engineering-architecture/inter-process-communication-libraries.md) — Manages inter-process communication and window settings through reactive bindings connected to the desktop environment. ([source](https://vueuse.org/add-ons.html))
- [Dependency Injection](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/dependency-injection.md) — Supports customizable environment contexts by overriding native browser objects for testing and isolated execution.

### Data & Databases

- [Real-time Databases](https://awesome-repositories.com/f/data-databases/real-time-databases.md) — Provides database systems that offer immediate data synchronization across clients via persistent connections. ([source](https://vueuse.org/add-ons))

### DevOps & Infrastructure

- [Browser Storage Persistence](https://awesome-repositories.com/f/devops-infrastructure/configuration-management/file-based-configuration/browser-storage-persistence.md) — Provides mechanisms for saving and retrieving user settings using browser-native storage APIs. ([source](https://cdn.jsdelivr.net/gh/vueuse/vueuse@main/README.md))

### Operating Systems & Systems Programming

- [Desktop Environment Bindings](https://awesome-repositories.com/f/operating-systems-systems-programming/desktop-environment-frameworks/desktop-environment-components/desktop-applications/desktop-environment-bindings.md) — Exposes native desktop APIs as reactive properties to manage window state and communication between application processes. ([source](https://vueuse.org/add-ons))

### Graphics & Multimedia

- [Audio Playback](https://awesome-repositories.com/f/graphics-multimedia/audio-music/audio-playback.md) — Provides frameworks for playing local or remote audio files with support for background execution and playback controls. ([source](https://vueuse.org/add-ons))