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

utilities.mddocs/

Utility Functions

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

Capabilities

Function Utilities

useMemoize

Cache function results based on arguments to improve performance.

/**
 * Cache function results based on arguments
 * @param resolver - Function to memoize
 * @param options - Configuration options
 * @returns Memoized function
 */
function useMemoize<Args extends any[], Return>(
  resolver: (...args: Args) => Return,
  options?: UseMemoizeOptions<Args, Return>
): (...args: Args) => Return;

interface UseMemoizeOptions<Args extends any[], Return> {
  getKey?: (...args: Args) => string | number;
  cache?: UseMemoizeCache<string | number, Return>;
}

interface UseMemoizeCache<Key, Value> {
  has: (key: Key) => boolean;
  get: (key: Key) => Value | undefined;
  set: (key: Key, value: Value) => void;
  delete: (key: Key) => boolean;
  clear: () => void;
}

Usage Examples:

import { useMemoize } from "@vueuse/core";

// Expensive calculation
const fibonacci = useMemoize((n: number): number => {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
});

// API calls with caching
const fetchUser = useMemoize(async (id: string) => {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
});

// Custom cache key
const cachedFn = useMemoize(
  (a: number, b: string) => `${a}-${b}`,
  {
    getKey: (a, b) => `${a}:${b}`
  }
);

createUnrefFn

Create a function that accepts refs and returns unreffed values.

/**
 * Create function that accepts refs and returns unreffed values
 * @param fn - Function to wrap
 * @returns Function that auto-unrefs arguments
 */
function createUnrefFn<T extends Function>(fn: T): T;

Feature Detection

useSupported

Check if a browser feature is supported.

/**
 * Check if a browser feature is supported
 * @param callback - Feature detection callback
 * @param sync - Run synchronously
 * @returns Reactive support state
 */
function useSupported(
  callback: () => unknown,
  sync?: boolean
): ComputedRef<boolean>;

Usage Examples:

import { useSupported } from "@vueuse/core";

// Check for specific APIs
const isSupported = useSupported(() => navigator.geolocation);
const hasWebGL = useSupported(() => {
  const canvas = document.createElement('canvas');
  return canvas.getContext('webgl');
});

// Use in components
if (isSupported.value) {
  // Use the feature
}

Data Manipulation

useCloned

Reactive clone of a ref with various cloning strategies.

/**
 * Reactive clone of a ref
 * @param source - Source ref to clone
 * @param options - Configuration options
 * @returns Cloned value utilities
 */
function useCloned<T>(
  source: MaybeRefOrGetter<T>,
  options?: UseClonedOptions<T>
): UseClonedReturn<T>;

interface UseClonedReturn<T> {
  cloned: ComputedRef<T>;
  sync: () => void;
}

interface UseClonedOptions<T> {
  manual?: boolean;
  clone?: CloneFn<T> | boolean;
}

type CloneFn<T> = (source: T) => T;

useSorted

Reactive array sorting with custom comparison functions.

/**
 * Reactive array sorting
 * @param source - Source array or ref
 * @param compareFn - Comparison function or options
 * @param options - Configuration options when compareFn is provided
 * @returns Sorted array ref
 */
function useSorted<T>(
  source: MaybeRefOrGetter<T[]>,
  compareFn?: (a: T, b: T) => number,
  options?: UseSortedOptions<T>
): ComputedRef<T[]>;

function useSorted<T>(
  source: MaybeRefOrGetter<T[]>,
  options?: UseSortedOptions<T>
): ComputedRef<T[]>;

interface UseSortedOptions<T> {
  dirty?: Ref<boolean>;
  compareFn?: (a: T, b: T) => number;
}

useCycleList

Cycle through a list of items with navigation methods.

/**
 * Cycle through a list of items
 * @param list - List of items to cycle through
 * @param options - Configuration options
 * @returns Cycle utilities
 */
function useCycleList<T>(
  list: MaybeRef<T[]>,
  options?: UseCycleListOptions<T>
): UseCycleListReturn<T>;

interface UseCycleListReturn<T> {
  state: Ref<T>;
  index: Ref<number>;
  next: (n?: number) => T;
  prev: (n?: number) => T;
  go: (i: number) => T;
}

interface UseCycleListOptions<T> {
  initialValue?: MaybeRef<T>;
  fallbackIndex?: number;
  getIndexOf?: (value: T, list: T[]) => number;
}

Previous Values

usePrevious

Get the previous value of a ref.

/**
 * Get the previous value of a ref
 * @param value - Source ref
 * @param initialValue - Initial previous value
 * @returns Previous value ref
 */
function usePrevious<T>(
  value: MaybeRef<T>,
  initialValue?: T
): Readonly<Ref<T | undefined>>;

Encoding & Decoding

useBase64

Reactive Base64 encoding and decoding.

/**
 * Reactive Base64 encoding and decoding
 * @param text - Text to encode/decode
 * @param options - Configuration options
 * @returns Base64 utilities
 */
function useBase64(
  text: MaybeRefOrGetter<string>,
  options?: UseBase64Options
): UseBase64Return;

interface UseBase64Return {
  base64: ComputedRef<string>;
  buffer: ComputedRef<ArrayBuffer>;
  promise: ComputedRef<Promise<string>>;
}

interface UseBase64Options {
  serializer?: UseBase64Serializer;
}

interface UseBase64Serializer {
  read: (text: string) => string;
  write: (text: string) => string;
}

Text Utilities

useTextDirection

Reactive text direction tracking and management.

/**
 * Reactive text direction
 * @param options - Configuration options
 * @returns Text direction utilities
 */
function useTextDirection(options?: UseTextDirectionOptions): UseTextDirectionReturn;

interface UseTextDirectionReturn {
  dir: WritableComputedRef<UseTextDirectionValue>;
}

interface UseTextDirectionOptions extends ConfigurableDocument {
  selector?: string;
  observe?: boolean;
  initialValue?: UseTextDirectionValue;
}

type UseTextDirectionValue = 'ltr' | 'rtl' | 'auto';

useTextSelection

Reactive text selection information.

/**
 * Reactive text selection
 * @param options - Configuration options
 * @returns Text selection state
 */
function useTextSelection(options?: UseTextSelectionOptions): UseTextSelectionReturn;

interface UseTextSelectionReturn {
  text: ComputedRef<string>;
  rects: ComputedRef<DOMRect[]>;
  ranges: ComputedRef<Range[]>;
  selection: ComputedRef<Selection | null>;
}

useTextareaAutosize

Auto-resize textarea based on content.

/**
 * Auto-resize textarea based on content
 * @param element - Textarea element or ref
 * @param input - Input value (reactive)
 * @param options - Configuration options
 * @returns Textarea utilities
 */
function useTextareaAutosize(
  element?: MaybeElementRef<HTMLTextAreaElement>,
  input?: MaybeRef<string>,
  options?: UseTextareaAutosizeOptions
): UseTextareaAutosizeReturn;

interface UseTextareaAutosizeReturn {
  textarea: Ref<HTMLTextAreaElement | undefined>;
  input: Ref<string>;
  triggerResize: () => void;
}

interface UseTextareaAutosizeOptions {
  watch?: MaybeElementRef | MaybeElementRef[];
  onResize?: () => void;
  styleProp?: string;
}

Image Utilities

useImage

Reactive image loading with status tracking.

/**
 * Reactive image loading with status tracking
 * @param options - Configuration options
 * @returns Image loading state and utilities
 */
function useImage(options: UseImageOptions): UseImageReturn;

interface UseImageReturn {
  isLoading: Ref<boolean>;
  error: Ref<Event | null>;
  execute: (options?: UseImageOptions) => Promise<HTMLImageElement>;
}

interface UseImageOptions {
  src: string;
  srcset?: string;
  sizes?: string;
  class?: string;
  loading?: 'eager' | 'lazy';
  crossorigin?: 'anonymous' | 'use-credentials' | '';
  referrerPolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url';
}

Object URL Management

useObjectUrl

Create and manage object URLs for Blob/File objects.

/**
 * Create and manage object URLs for Blob/File objects
 * @param object - Blob, File, or MediaSource object
 * @returns Object URL utilities
 */
function useObjectUrl(object: MaybeRef<Blob | MediaSource | undefined>): ComputedRef<string | undefined>;

Time Utilities

useNow

Reactive current timestamp with configurable update intervals.

/**
 * Reactive current timestamp
 * @param options - Configuration options
 * @returns Current timestamp ref
 */
function useNow(options?: UseNowOptions): Ref<Date>;

interface UseNowOptions<Controls extends boolean = false> {
  controls?: Controls;
  interval?: 'requestAnimationFrame' | number;
}

useTimestamp

Reactive timestamp with millisecond precision.

/**
 * Reactive timestamp with millisecond precision
 * @param options - Configuration options
 * @returns Timestamp utilities
 */
function useTimestamp(options?: UseTimestampOptions): UseTimestampReturn;

interface UseTimestampReturn {
  timestamp: Ref<number>;
  pause: Fn;
  resume: Fn;
}

interface UseTimestampOptions<Controls extends boolean = false> {
  controls?: Controls;
  offset?: number;
  immediate?: boolean;
  interval?: 'requestAnimationFrame' | number;
  callback?: (timestamp: number) => void;
}

useTimeAgo

Reactive time ago formatting.

/**
 * Reactive time ago formatting
 * @param time - Time to format
 * @param options - Configuration options
 * @returns Formatted time ago string
 */
function useTimeAgo(
  time: MaybeComputedRef<Date | number | string>,
  options?: UseTimeAgoOptions<boolean>
): ComputedRef<string>;

interface UseTimeAgoOptions<Controls extends boolean = false> {
  controls?: Controls;
  updateInterval?: number;
  max?: string | number | Date | UseTimeAgoUnit;
  fullDateFormatter?: (date: Date) => string;
  messages?: UseTimeAgoMessages;
  rounding?: number;
  showSecond?: boolean;
  unit?: UseTimeAgoUnitNamesDefault;
}

type UseTimeAgoUnit = 'second' | 'minute' | 'hour' | 'day' | 'week' | 'month' | 'year';

useTimeoutPoll

Reactive timeout-based polling.

/**
 * Reactive timeout-based polling
 * @param fn - Function to poll
 * @param interval - Poll interval in milliseconds
 * @param options - Configuration options
 * @returns Poll utilities
 */
function useTimeoutPoll(
  fn: () => Awaitable<void>,
  interval: MaybeRef<number>,
  options?: UseTimeoutPollOptions
): UseTimeoutPollReturn;

interface UseTimeoutPollReturn extends Pausable {
  isActive: Ref<boolean>;
}

Countdown & Timing

useCountdown

Reactive countdown timer with completion callbacks.

/**
 * Reactive countdown timer
 * @param count - Initial count or target date
 * @param options - Configuration options
 * @returns Countdown utilities
 */
function useCountdown(
  count: MaybeRef<number>,
  options?: UseCountdownOptions
): UseCountdownReturn;

interface UseCountdownReturn {
  count: Ref<number>;
  start: () => void;
  pause: () => void;
  resume: () => void;
  stop: () => void;
  reset: (newCount?: number) => void;
  restart: (newCount?: number) => void;
  isActive: Ref<boolean>;
}

interface UseCountdownOptions {
  interval?: number;
  onFinish?: () => void;
  onUpdate?: (count: number) => void;
}

Pagination

useOffsetPagination

Reactive offset-based pagination utilities.

/**
 * Reactive offset-based pagination
 * @param options - Configuration options
 * @returns Pagination utilities
 */
function useOffsetPagination(options: UseOffsetPaginationOptions): UseOffsetPaginationReturn;

interface UseOffsetPaginationReturn {
  currentPage: Ref<number>;
  currentPageSize: Ref<number>;
  pageCount: ComputedRef<number>;
  isFirstPage: ComputedRef<boolean>;
  isLastPage: ComputedRef<boolean>;
  prev: () => void;
  next: () => void;
}

interface UseOffsetPaginationOptions {
  total: MaybeRefOrGetter<number>;
  page?: MaybeRef<number>;
  pageSize?: MaybeRef<number>;
  onPageChange?: (returnValue: UseOffsetPaginationReturn) => void;
  onPageSizeChange?: (returnValue: UseOffsetPaginationReturn) => void;
}

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