DOCSEARCHbyAlgolia
Submit Docs

VueUse

website·Indexed 32 days ago

https://vueuse.zhcndoc.com

A collection of essential Vue Composition Utilities. It provides a comprehensive directory of functions categorized by utility type, including Sensors, Elements, Animation, Utilities, Time, Browser, State, and Components. The ecosystem includes specialized add-ons such as @vueuse/rxjs, @vueuse/router, @vueuse/firebase, @vueuse/electron, @vueuse/math, and @vueuse/integrations, as well as @vueuse/components for renderable component versions of composables.

Tokens
136.8K
Snippets
878
Records
1.1K
Agent score
55%

What's inside VueUse

  1. Overview of @vueuse/rxjs utility functions

    The @vueuse/rxjs package provides several utilities to bridge Vue refs and RxJS:

    • from: A wrapper for RxJS from() and fromEvent() that allows them to accept Vue refs.
    • toObserver: A sugar function to convert a Vue ref into an RxJS Observer.
    • useObservable: Consumes an RxJS Observable and returns a Vue ref. It automatically handles unsubscription when the component is unmounted.
    • useExtractedObservable: Extracts an RxJS Observable from one or more composables, returns a ref, and automatically unsubscribes on unmount.
    • useSubject: Binds an RxJS Subject to a Vue ref, propagating value changes between the two.
    • useSubscription: Manages an RxJS Subscription to prevent memory leaks by handling cleanup automatically.
    • watchExtractedObservable: Watches the value of an RxJS Observable extracted from composables.

  2. Overview of useSortable integration

    useSortable is a VueUse integration that wraps the SortableJS library. It is currently designed for single-list drag-and-drop sorting. For a full list of available configuration options, refer to the SortableJS options documentation.

  3. Overview of VueUse Skills for AI Agents

    VueUse Skills is an experimental project designed to help AI agents use VueUse libraries more accurately while minimizing token consumption. It employs progressive disclosure (sending overviews first, then detailed types on demand), an offline-first design, and customizable invocation policies to reduce hallucinations and prevent the invention of non-existent APIs.

  4. Overview of @vueuse/rxjs utility functions

    The @vueuse/rxjs package provides several utilities to bridge RxJS and Vue refs:

    • from: A wrapper for RxJS from() and fromEvent() that allows them to accept Vue refs.
    • toObserver: A sugar function to convert a Vue ref into an RxJS Observer.
    • useObservable: Consumes an RxJS Observable and returns a Vue ref. It automatically handles unsubscription when the component is unmounted.
    • useExtractedObservable: Extracts an RxJS Observable from one or more composables and returns a ref, with automatic unsubscription on unmount.
    • useSubject: Binds an RxJS Subject to a Vue ref, propagating value changes between them.
    • useSubscription: Manages an RxJS Subscription to prevent memory leaks by handling unsubscription automatically.
    • watchExtractedObservable: Watches the value of an RxJS Observable extracted from one or more composables.

  5. Overview of useFetch

    useFetch is a reactive wrapper around the native Fetch API. It provides built-in capabilities for aborting requests, intercepting requests before they are sent, automatically re-fetching when a URL changes, and creating pre-configured fetch instances.

  6. Overview of @vueuse/electron functions

    The @vueuse/electron package provides several reactive wrappers for Electron renderer process APIs:

    • useIpcRenderer: Provides a reactive version of the ipcRenderer and all its associated APIs.
    • useIpcRendererInvoke: Wraps ipcRenderer.invoke to make asynchronous IPC calls appear synchronous and reactive.
    • useIpcRendererOn: Simplifies ipcRenderer.on by automatically removing the listener via ipcRenderer.removeListener when the component is unmounted.
    • useZoomFactor: Provides a reactive value for the WebFrame zoom factor.
    • useZoomLevel: Provides a reactive value for the WebFrame zoom level.

  7. Use VueUse Array utilities for reactive data processing

    VueUse provides reactive versions of standard JavaScript Array methods. These functions return reactive results that update when the source array changes:

    • useArrayFilter, useArrayFind, useArrayFindIndex, useArrayFindLast, useArraySome, useArrayEvery, useArrayIncludes, useArrayMap, useArrayReduce, useArrayJoin.
    • useArrayDifference: Gets the reactive difference between two arrays.
    • useArrayUnique: Maintains a reactive array of unique values.
    • useSorted: Maintains a reactively sorted array.

  8. Access MutationRecords in onElementRemoval callback

    The callback function provided to onElementRemoval receives an array of MutationRecord objects. These records contain detailed information about the DOM mutation that triggered the removal.
    import { onElementRemoval } from '@vueuse/core'

onElementRemoval(targetRef, (mutationRecords) => {
  console.log('Element has been removed', mutationRecords)
})

  9. Run expensive functions in a Web Worker using useWebWorkerFn

    The useWebWorkerFn function allows you to execute computationally expensive tasks in a separate Web Worker thread to avoid blocking the main UI thread. It wraps the worker logic in a Promise-based API, making it easy to handle asynchronous results in Vue components.
    import { useWebWorkerFn } from '@vueuse/core'

const { workerFn } = useWebWorkerFn(() => {
  // Perform heavy work here
})

// Call the function and wait for the result
const result = await workerFn()

  10. Manage reactive session storage with useSessionStorage

    useSessionStorage creates a reactive reference linked to the browser's sessionStorage. It allows you to read and write data to session storage while keeping the state synchronized across your Vue application. For detailed usage and options, refer to the general useStorage documentation as useSessionStorage is a specialized implementation of it.
    import { useSessionStorage } from '@vueuse/core'

// Example: Create a reactive state linked to sessionStorage key 'my-store'
const state = useSessionStorage('my-store', { hello: 'vueuse' })

  11. Manage reactive LocalStorage state with useLocalStorage

    useLocalStorage is a VueUse utility that creates a reactive reference synced with the browser's localStorage. It is a specialized version of useStorage.

  12. Track device motion and orientation

    VueUse provides reactive sensors for device movement:

    • useDeviceMotion: Provides information about the speed of change in device position and orientation (DeviceMotionEvent).
    • useDeviceOrientation: Provides the physical orientation of the device (DeviceOrientationEvent).