CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-vueuse--core

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

Pending
Overview
Eval results
Files

shared-utilities.mddocs/

Shared Utilities

Essential reactive programming utilities and helpers that provide fundamental building blocks for Vue composition patterns. These utilities offer enhanced reactivity patterns, advanced computed properties, lifecycle helpers, and functional programming patterns.

Capabilities

Enhanced Reactivity

computedEager

Eager computed that triggers computation immediately without lazy evaluation.

/**
 * Eager computed that computes immediately
 * @param fn - Computation function
 * @returns Computed ref that computes eagerly
 */
function computedEager<T>(fn: () => T): ComputedRef<T>;

computedWithControl

Computed with manual trigger control for complex dependency management.

/**
 * Computed with manual control over when to trigger re-computation
 * @param source - Source function
 * @param fn - Computation function
 * @returns Controlled computed ref with trigger function
 */
function computedWithControl<T, S>(
  source: () => S,
  fn: (source: S, oldValue?: T) => T
): {
  0: ComputedRef<T>;
  1: () => void;
  trigger: () => void;
};

reactiveComputed

Make a computed reactive by accepting refs as arguments.

/**
 * Computed that accepts reactive arguments
 * @param fn - Function that accepts reactive arguments
 * @returns Reactive computed function
 */
function reactiveComputed<T extends any[], R>(
  fn: (...args: T) => R
): (...args: ToRefs<T>) => ComputedRef<R>;

Ref Utilities

refAutoReset

Ref that automatically resets to default value after specified time.

/**
 * Ref that automatically resets after a timeout
 * @param defaultValue - Default value to reset to
 * @param afterMs - Milliseconds after which to reset
 * @returns Auto-resetting ref
 */
function refAutoReset<T>(
  defaultValue: T,
  afterMs?: MaybeRefOrGetter<number>
): Ref<T>;

refDebounced

Debounced ref that delays updates.

/**
 * Debounced version of a ref
 * @param value - Source ref or value
 * @param ms - Debounce delay in milliseconds
 * @param options - Debounce options
 * @returns Debounced ref
 */
function refDebounced<T>(
  value: MaybeRefOrGetter<T>,
  ms?: MaybeRefOrGetter<number>,
  options?: DebounceFilterOptions
): Readonly<Ref<T>>;

refThrottled

Throttled ref that limits update frequency.

/**
 * Throttled version of a ref
 * @param value - Source ref or value
 * @param delay - Throttle delay in milliseconds
 * @param trailing - Whether to invoke on trailing edge
 * @param leading - Whether to invoke on leading edge
 * @returns Throttled ref
 */
function refThrottled<T>(
  value: MaybeRefOrGetter<T>,
  delay?: number,
  trailing?: boolean,
  leading?: boolean
): Readonly<Ref<T>>;

refDefault

Ref with default value fallback for undefined/null values.

/**
 * Ref with default value when null or undefined
 * @param source - Source ref
 * @param defaultValue - Default value to use
 * @returns Ref with default fallback
 */
function refDefault<T>(
  source: Ref<T | null | undefined>,
  defaultValue: T
): Ref<T>;

refWithControl

Ref with get/set control and trigger functions.

/**
 * Ref with manual control over get/set operations
 * @param initial - Initial value
 * @param options - Control options
 * @returns Controlled ref with additional methods
 */
function refWithControl<T>(
  initial: T,
  options?: RefWithControlOptions<T>
): RefWithControlReturn<T>;

interface RefWithControlReturn<T> extends Ref<T> {
  get: (tracking?: boolean) => T;
  set: (value: T, triggering?: boolean) => void;
  untrackedGet: () => T;
  silentSet: (value: T) => void;
  peek: () => T;
  lay: (value: T) => void;
  trigger: () => void;
}

extendRef

Extend a ref with additional reactive properties.

/**
 * Extend a ref with additional reactive properties
 * @param ref - Source ref
 * @param extend - Object with additional properties
 * @param options - Extension options
 * @returns Extended ref with additional properties
 */
function extendRef<R extends Ref<any>, Extend extends Record<string, any>>(
  ref: R,
  extend: Extend,
  options?: ExtendRefOptions
): ExtendRefReturn<R, Extend>;

Advanced Watchers

watchDebounced

Debounced watcher that delays callback execution.

/**
 * Debounced version of watch
 * @param source - Watch source
 * @param cb - Callback function
 * @param options - Watch and debounce options
 * @returns Stop function
 */
function watchDebounced<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchDebouncedOptions
): WatchStopHandle;

watchThrottled

Throttled watcher that limits callback frequency.

/**
 * Throttled version of watch
 * @param source - Watch source
 * @param cb - Callback function
 * @param options - Watch and throttle options
 * @returns Stop function
 */
function watchThrottled<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchThrottledOptions
): WatchStopHandle;

watchPausable

Pausable watcher with pause/resume controls.

/**
 * Pausable watcher with pause/resume controls
 * @param source - Watch source
 * @param cb - Callback function
 * @param options - Watch options
 * @returns Pausable watcher controls
 */
function watchPausable<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchPausableOptions
): PausableWatchReturn<T>;

interface PausableWatchReturn<T> {
  stop: WatchStopHandle;
  pause: () => void;
  resume: () => void;
  isActive: Ref<boolean>;
}

watchIgnorable

Ignorable watcher that can skip callback execution.

/**
 * Ignorable watcher that can skip notifications
 * @param source - Watch source
 * @param cb - Callback function
 * @param options - Watch options
 * @returns Ignorable watcher controls
 */
function watchIgnorable<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>,
  options?: WatchIgnorableOptions
): IgnorableWatchReturn;

interface IgnorableWatchReturn {
  stop: WatchStopHandle;
  ignoreUpdates: (updater: () => void) => void;
  ignorePrevAsyncUpdates: () => void;
}

watchTriggerable

Triggerable watcher with manual trigger capability.

/**
 * Triggerable watcher with manual trigger
 * @param source - Watch source
 * @param cb - Callback function
 * @param options - Watch options
 * @returns Triggerable watcher controls
 */
function watchTriggerable<T>(
  source: WatchSource<T>,
  cb: WatchCallback<T>, 
  options?: WatchTriggerableOptions
): TriggerableWatchReturn;

interface TriggerableWatchReturn {
  stop: WatchStopHandle;
  trigger: () => void;
}

whenever

Shorthand for conditional watching when value is truthy.

/**
 * Shorthand for watching when condition is truthy
 * @param source - Watch source
 * @param cb - Callback function
 * @param options - Watch options
 * @returns Stop function
 */
function whenever<T>(
  source: WatchSource<T | false | null | undefined>,
  cb: WatchCallback<T>,
  options?: WatchOptions
): WatchStopHandle;

until

Wait for condition to be truthy.

/**
 * Wait for a condition to be truthy
 * @param r - Condition to wait for
 * @returns Promise that resolves when condition is truthy
 */
function until<T>(r: MaybeRefOrGetter<T>): UntilReturn<T>;

interface UntilReturn<T> {
  toMatch: (condition: (v: T) => boolean, options?: UntilToMatchOptions) => Promise<void>;
  changed: (options?: UntilOptions) => Promise<void>;
  changedTimes: (n?: number, options?: UntilOptions) => Promise<void>;
  toBe: <P>(value: MaybeRefOrGetter<P>, options?: UntilOptions) => Promise<void>;
  toBeTruthy: (options?: UntilOptions) => Promise<void>;
  toBeNull: (options?: UntilOptions) => Promise<void>;
  toBeUndefined: (options?: UntilOptions) => Promise<void>;
  not: UntilReturn<T>;
}

Array Utilities

useArrayMap

Reactive array map function.

/**
 * Reactive array map
 * @param list - Source array or ref
 * @param fn - Map function
 * @returns Reactive mapped array
 */
function useArrayMap<T, U>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number) => U
): ComputedRef<U[]>;

useArrayFilter

Reactive array filter function.

/**
 * Reactive array filter
 * @param list - Source array or ref
 * @param fn - Filter predicate function
 * @returns Reactive filtered array
 */
function useArrayFilter<T>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number) => boolean
): ComputedRef<T[]>;

useArrayFind

Reactive array find function.

/**
 * Reactive array find
 * @param list - Source array or ref
 * @param fn - Find predicate function
 * @returns Reactive found element
 */
function useArrayFind<T>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number) => boolean
): ComputedRef<T | undefined>;

useArrayReduce

Reactive array reduce function.

/**
 * Reactive array reduce
 * @param list - Source array or ref
 * @param reducer - Reducer function
 * @param initialValue - Initial accumulator value
 * @returns Reactive reduced value
 */
function useArrayReduce<T, U>(
  list: MaybeRefOrGetter<T[]>,
  reducer: (accumulator: U, currentValue: T, currentIndex: number) => U,
  initialValue: MaybeRefOrGetter<U>
): ComputedRef<U>;

useArraySome

Reactive array some function.

/**
 * Reactive array some
 * @param list - Source array or ref
 * @param fn - Test predicate function
 * @returns Reactive boolean result
 */
function useArraySome<T>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number) => boolean
): ComputedRef<boolean>;

useArrayEvery

Reactive array every function.

/**
 * Reactive array every
 * @param list - Source array or ref
 * @param fn - Test predicate function
 * @returns Reactive boolean result
 */
function useArrayEvery<T>(
  list: MaybeRefOrGetter<T[]>,
  fn: (element: T, index: number) => boolean
): ComputedRef<boolean>;

State Helpers

createGlobalState

Create globally shared reactive state.

/**
 * Create global reactive state that persists across component instances
 * @param stateFactory - Function that creates the initial state
 * @returns Global state creator function
 */
function createGlobalState<T>(
  stateFactory: () => T
): () => T;

createSharedComposable

Create a shared composable that returns the same instance.

/**
 * Make a composable function shared across multiple instances
 * @param composable - Composable function to share
 * @returns Shared version of the composable
 */
function createSharedComposable<Fn extends (...args: any[]) => any>(
  composable: Fn
): Fn;

useToggle

Toggle state management utility.

/**
 * Boolean toggle utility with multiple states support
 * @param initialValue - Initial value or array of values
 * @returns Toggle state and functions
 */
function useToggle<T = boolean>(
  initialValue?: MaybeRef<T>
): UseToggleReturn<T>;

interface UseToggleReturn<T> {
  0: Ref<T>;
  1: (value?: T) => T;
  toggle: (value?: T) => T;
}

useCounter

Counter state management utility.

/**
 * Counter with increment/decrement operations
 * @param initialValue - Initial counter value
 * @param options - Counter options
 * @returns Counter state and operations
 */
function useCounter(
  initialValue?: MaybeRef<number>,
  options?: UseCounterOptions
): UseCounterReturn;

interface UseCounterReturn {
  count: Ref<number>;
  inc: (delta?: number) => number;
  dec: (delta?: number) => number;
  get: () => number;
  set: (val: number) => number;
  reset: (val?: number) => number;
}

Time & Intervals

useInterval

Reactive interval management.

/**
 * Reactive interval
 * @param callback - Callback function to execute
 * @param interval - Interval delay in milliseconds
 * @param options - Interval options
 * @returns Interval controls
 */
function useInterval(
  callback: Fn,
  interval?: MaybeRef<number>,
  options?: UseIntervalOptions
): Pausable;

useTimeout

Reactive timeout management.

/**
 * Reactive timeout
 * @param callback - Callback function to execute
 * @param interval - Timeout delay in milliseconds
 * @param options - Timeout options
 * @returns Timeout controls
 */
function useTimeout(
  callback: Fn,
  interval: MaybeRef<number>,
  options?: UseTimeoutOptions
): UseTimeoutReturn;

useDateFormat

Reactive date formatting utility.

/**
 * Reactive date formatting
 * @param date - Date to format
 * @param format - Format string
 * @param options - Formatting options
 * @returns Reactive formatted date string
 */
function useDateFormat(
  date: MaybeRefOrGetter<Date | number | string>,
  format?: MaybeRefOrGetter<string>,
  options?: UseDateFormatOptions
): ComputedRef<string>;

Utility Functions

reactify

Convert a function to accept reactive arguments.

/**
 * Convert a function to accept refs as arguments
 * @param fn - Function to reactify
 * @returns Reactified function
 */
function reactify<T extends (...args: any[]) => any>(
  fn: T,
  options?: ReactifyOptions<T>
): ReactifyReturn<T>;

toReactive

Convert a ref to reactive object.

/**
 * Convert refs to reactive object
 * @param objectRef - Ref containing an object
 * @returns Reactive version of the object
 */
function toReactive<T extends Record<string, any>>(
  objectRef: MaybeRef<T>
): ToReactive<T>;

makeDestructurable

Make an object both array-like and object-like for destructuring.

/**
 * Make return values suitable for both array and object destructuring
 * @param obj - Object to make destructurable
 * @param arr - Array representation
 * @returns Destructurable object
 */
function makeDestructurable<T extends Record<string, unknown>, A extends readonly unknown[]>(
  obj: T,
  arr: A
): T & A;

isDefined

Type guard for checking if value is defined.

/**
 * Type guard to check if value is defined (not null or undefined)
 * @param val - Value to check
 * @returns True if value is defined
 */
function isDefined<T>(val: T | undefined | null): val is T;

get

Get value from MaybeRefOrGetter.

/**
 * Get the value from MaybeRefOrGetter
 * @param val - Value, ref, or getter function
 * @returns Resolved value
 */
function get<T>(val: MaybeRefOrGetter<T>): T;

set

Set value to a ref.

/**
 * Set value to a ref
 * @param ref - Target ref
 * @param val - Value to set
 */
function set<T>(ref: Ref<T>, val: T): void;

Lifecycle Helpers

tryOnMounted

Safely call onMounted if inside component instance.

/**
 * Safe version of onMounted that works outside component context
 * @param fn - Function to call on mounted
 * @param sync - Whether to call synchronously if already mounted
 * @returns Whether the hook was successfully registered
 */
function tryOnMounted(fn: Fn, sync?: boolean): boolean;

tryOnBeforeMount

Safely call onBeforeMount if inside component instance.

/**
 * Safe version of onBeforeMount that works outside component context
 * @param fn - Function to call before mount
 * @param sync - Whether to call synchronously if component exists
 * @returns Whether the hook was successfully registered
 */
function tryOnBeforeMount(fn: Fn, sync?: boolean): boolean;

tryOnUnmounted

Safely call onUnmounted if inside component instance.

/**
 * Safe version of onUnmounted that works outside component context
 * @param fn - Function to call on unmounted
 * @returns Whether the hook was successfully registered
 */
function tryOnUnmounted(fn: Fn): boolean;

tryOnScopeDispose

Safely call onScopeDispose if inside effect scope.

/**
 * Safe version of onScopeDispose that works outside effect scope
 * @param fn - Function to call on scope dispose
 * @returns Whether the hook was successfully registered
 */
function tryOnScopeDispose(fn: Fn): boolean;

Shared Types

// Core utility types
type MaybeRef<T> = T | Ref<T>;
type MaybeRefOrGetter<T> = T | MaybeRef<T> | (() => T);
type MaybeComputedRef<T> = ComputedRef<T> | MaybeRef<T>;

// Function types
type Fn = () => void;
type AnyFn = (...args: any[]) => any;

// Control interfaces
interface Pausable {
  isActive: Ref<boolean>;
  pause: Fn;
  resume: Fn;
}

interface Awaitable<T> {
  [Symbol.iterator]: any;
  then: PromiseLike<T>['then'];
}

// Filter options
interface DebounceFilterOptions {
  maxWait?: MaybeRefOrGetter<number>;
  rejectOnCancel?: boolean;
}

interface ThrottleFilterOptions {
  trailing?: boolean;
  leading?: boolean;
  rejectOnCancel?: boolean;
}

Install with Tessl CLI

npx tessl i tessl/npm-vueuse--core

docs

animation-effects.md

browser-apis.md

device-sensors.md

dom-elements.md

events.md

index.md

mouse-pointer.md

network.md

shared-utilities.md

state-management.md

template-composition.md

utilities.md

tile.json