or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-effects.mdbrowser-apis.mddevice-sensors.mddom-elements.mdevents.mdindex.mdmouse-pointer.mdnetwork.mdshared-utilities.mdstate-management.mdtemplate-composition.mdutilities.md
tile.json

tessl/npm-vueuse--core

Collection of essential Vue Composition Utilities providing 146+ reactive composable functions for Vue 3 applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@vueuse/core@13.9.x

To install, run

npx @tessl/cli install tessl/npm-vueuse--core@13.9.0

index.mddocs/

VueUse Core

VueUse Core is a comprehensive collection of Vue 3 Composition API utilities providing 146+ reactive composable functions. These utilities cover common web development needs including state management, DOM manipulation, browser APIs, event handling, device sensors, network operations, and animation utilities. Built with TypeScript, it offers full type safety, SSR compatibility, and automatic cleanup.

Package Information

  • Package Name: @vueuse/core
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @vueuse/core

Core Imports

import { useStorage, useMouse, useFetch, useVModel } from "@vueuse/core";

For individual imports (tree-shaking):

import { useStorage } from "@vueuse/core/useStorage";
import { useMouse } from "@vueuse/core/useMouse";

CommonJS:

const { useStorage, useMouse, useFetch, useVModel } = require("@vueuse/core");

Basic Usage

import { ref } from "vue";
import { useStorage, useMouse, useEventListener } from "@vueuse/core";

// Reactive localStorage with automatic serialization
const user = useStorage("user", { name: "", preferences: {} });

// Reactive mouse position
const { x, y } = useMouse();

// Event listener with automatic cleanup
useEventListener("click", () => {
  console.log("Document clicked");
});

// Works with refs and reactive data
const count = ref(0);
const stored = useStorage("count", count);

Architecture

VueUse Core is organized around several key design patterns:

  • Composable Functions: Each utility follows Vue 3 composition API patterns with reactive returns
  • Automatic Cleanup: All event listeners and resources are automatically cleaned up via tryOnScopeDispose
  • SSR Compatibility: Server-side rendering safe with configurable SSR handlers
  • Configurable Options: Consistent options patterns with sensible defaults across all functions
  • TypeScript Integration: Full type safety with generic type preservation and inference
  • Reactive Returns: Most functions return reactive refs that update automatically

Capabilities

State Management

Core reactive state utilities for managing component and application state with persistence and history tracking.

function useStorage<T>(
  key: string,
  defaults: MaybeRefOrGetter<T>,
  storage?: StorageLike,
  options?: UseStorageOptions<T>
): RemovableRef<T>;

function useVModel<P extends object, K extends keyof P>(
  props: P,
  key?: K,
  emit?: (name: string, ...args: any[]) => void,
  options?: UseVModelOptions<P[K], true>
): WritableComputedRef<P[K]>;

State Management

DOM & Element Utilities

Reactive utilities for interacting with DOM elements, tracking element properties, and managing element state.

function useElementSize(
  target: MaybeComputedElementRef,
  initialSize?: ElementSize,
  options?: UseResizeObserverOptions
): { 
  width: Ref<number>; 
  height: Ref<number>; 
  stop: () => void; 
};

function useActiveElement<T extends HTMLElement>(
  options?: UseActiveElementOptions
): ShallowRef<T | null | undefined>;

DOM & Element Utilities

Mouse & Pointer Events

Comprehensive mouse and pointer event handling with multi-touch support and gesture detection.

function useMouse(options?: UseMouseOptions): {
  x: Ref<number>;
  y: Ref<number>;
  sourceType: Ref<UseMouseSourceType>;
};

function useDraggable(
  target: MaybeComputedElementRef,
  options?: UseDraggableOptions
): {
  x: Ref<number>;
  y: Ref<number>;
  isDragging: Ref<boolean>;
  position: ComputedRef<Position>;
  style: ComputedRef<CSSProperties>;
};

Mouse & Pointer Events

Network & Communication

HTTP client utilities, WebSocket management, and browser communication APIs for data fetching and real-time communication.

function useFetch<T>(
  url: MaybeRefOrGetter<string>,
  options?: RequestInit,
  useFetchOptions?: UseFetchOptions
): UseFetchReturn<T> & PromiseLike<UseFetchReturn<T>>;

function useWebSocket<Data = any>(
  url: MaybeRefOrGetter<string | URL | undefined>,
  options?: UseWebSocketOptions
): UseWebSocketReturn<Data>;

Network & Communication

Event Handling

Event listener management with automatic cleanup and specialized event utilities for common interaction patterns.

function useEventListener<E extends keyof WindowEventMap>(
  event: E,
  listener: (this: Window, ev: WindowEventMap[E]) => any,
  options?: ConfigurableWindow & AddEventListenerOptions
): Fn;

function onClickOutside(
  target: MaybeElementRef,
  handler: OnClickOutsideHandler,
  options?: OnClickOutsideOptions
): Fn;

Event Handling

Browser APIs

Comprehensive browser API wrappers for clipboard, geolocation, permissions, notifications, theme management, and media device capabilities.

function useClipboard(options?: UseClipboardOptions): UseClipboardReturn;

function useGeolocation(options?: UseGeolocationOptions): {
  coords: Ref<GeolocationCoordinates>;
  locatedAt: Ref<number | null>;
  error: ShallowRef<GeolocationPositionError | null>;
  resume: Fn;
  pause: Fn;
};

function useColorMode<T extends string = BasicColorMode>(
  options?: UseColorModeOptions<T>
): Ref<T | BasicColorMode>;

function useDark(options?: UseDarkOptions): WritableComputedRef<boolean>;

function useFullscreen(
  target?: MaybeElementRef,
  options?: UseFullscreenOptions
): UseFullscreenReturn;

Browser APIs

Device & Sensors

Device motion, orientation, battery status, and viewport utilities for responsive and context-aware applications.

function useDeviceMotion(options?: UseDeviceMotionOptions): {
  acceleration: Ref<DeviceMotionEventAcceleration | null>;
  accelerationIncludingGravity: Ref<DeviceMotionEventAcceleration | null>;
  rotationRate: Ref<DeviceMotionEventRotationRate | null>;
  interval: Ref<number>;
};

function useBreakpoints<K extends string>(
  breakpoints: Record<K, number | string>,
  options?: UseBreakpointsOptions
): UseBreakpointsReturn<K>;

Device & Sensors

Animation & Effects

Animation utilities, scroll management, and visual effects for creating engaging user interfaces.

function useScroll(
  element: MaybeComputedElementRef,
  options?: UseScrollOptions
): {
  x: Ref<number>;
  y: Ref<number>;
  isScrolling: Ref<boolean>;
  arrivedState: ScrollState;
  directions: ScrollDirections;
  measure(): void;
};

function useTransition(
  source: Ref<number>,
  options?: UseTransitionOptions
): Ref<number>;

Animation & Effects

Shared Utilities

Essential reactive programming utilities and helpers providing enhanced reactivity patterns, advanced computed properties, lifecycle helpers, and functional programming patterns.

function computedEager<T>(fn: () => T): ComputedRef<T>;

function refDebounced<T>(
  value: MaybeRefOrGetter<T>,
  ms?: MaybeRefOrGetter<number>,
  options?: DebounceFilterOptions
): Readonly<Ref<T>>;

function watchDebounced<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchDebouncedOptions
): WatchStopHandle;

function useToggle<T = boolean>(
  initialValue?: MaybeRef<T>
): UseToggleReturn<T>;

Shared Utilities

Template Composition

Advanced template composition utilities for creating reusable templates, template-based promises, and template reference helpers.

function createReusableTemplate<
  Bindings extends Record<string, any> = {},
  Props extends Record<string, any> = {},
  MapSlotNameToSlotProps extends Record<string, any> = {}
>(
  options?: CreateReusableTemplateOptions<Props>
): ReusableTemplatePair<Bindings, MapSlotNameToSlotProps>;

function createTemplatePromise<Return = any, Args extends any[] = []>(
  options?: TemplatePromiseOptions
): TemplatePromiseReturn<Return, Args>;

function templateRef<T extends Element | ComponentPublicInstance = Element>(
  key?: string | number | symbol,
  initialValue?: T | null
): Readonly<Ref<T | null>>;

Template Composition

Utility Functions

Helper utilities for data manipulation, caching, type checking, and common programming patterns.

function useMemoize<Args extends any[], Return>(
  resolver: (...args: Args) => Return,
  options?: UseMemoizeOptions<Args, Return>
): (...args: Args) => Return;

function useSupported(callback: () => unknown): ComputedRef<boolean>;

Utility Functions

Shared Types

// Core configuration interfaces
interface ConfigurableWindow {
  window?: Window;
}

interface ConfigurableDocument {
  document?: Document;
}

// Common utility types
interface Position {
  x: number;
  y: number;
}

type PointerType = 'mouse' | 'touch' | 'pen';

type MaybeElementRef<T extends Element = Element> = MaybeRef<T | null | undefined>;

type MaybeComputedElementRef<T extends Element = Element> = MaybeRefOrGetter<T | null | undefined>;

// Storage interfaces
interface StorageLike {
  getItem(key: string): string | null;
  setItem(key: string, value: string): void;
  removeItem(key: string): void;
}

interface UseStorageOptions<T> {
  flush?: 'pre' | 'post' | 'sync';
  deep?: boolean;
  listenToStorageChanges?: boolean;
  writeDefaults?: boolean;
  mergeDefaults?: boolean | ((storageValue: T, defaults: T) => T);
  serializer?: StorageSerializer<T>;
  onError?: (error: Error) => void;
  shallow?: boolean;
  initOnMounted?: boolean;
}