tessl/npm-vueuse--shared

Collection of essential shared Vue Composition Utilities providing foundational building blocks for reactive Vue applications

—

Pending

Overview

Eval results

Files

Array Utilities

Name: tessl/npm-vueuse--shared
Author: tessl

Reactive versions of native Array methods that work seamlessly with Vue's reactivity system. These utilities provide computed refs that automatically update when the source array changes.

Capabilities

useArrayFilter

Reactive version of Array.prototype.filter.

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

Usage Example:

import { useArrayFilter, ref } from "@vueuse/shared";

const numbers = ref([1, 2, 3, 4, 5, 6]);
const evenNumbers = useArrayFilter(numbers, (n) => n % 2 === 0);

console.log(evenNumbers.value); // [2, 4, 6]

numbers.value.push(8);
console.log(evenNumbers.value); // [2, 4, 6, 8]

useArrayMap

Reactive version of Array.prototype.map.

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

Usage Example:

import { useArrayMap, ref } from "@vueuse/shared";

const numbers = ref([1, 2, 3]);
const doubled = useArrayMap(numbers, (n) => n * 2);

console.log(doubled.value); // [2, 4, 6]

const users = ref([{ name: 'John' }, { name: 'Jane' }]);
const names = useArrayMap(users, (user) => user.name);

console.log(names.value); // ['John', 'Jane']

useArrayReduce

Reactive version of Array.prototype.reduce.

/**
 * Reactive Array.reduce
 * @param list - Source array (ref, getter, or value)
 * @param reducer - Reducer function
 * @param initialValue - Initial accumulator value
 * @returns Computed ref with reduced value
 */
function useArrayReduce<T, U>(
  list: MaybeRefOrGetter<T[]>, 
  reducer: (previous: U, current: T, index: number, array: T[]) => U, 
  initialValue: MaybeRefOrGetter<U>
): ComputedRef<U>;

Usage Example:

import { useArrayReduce, ref } from "@vueuse/shared";

const numbers = ref([1, 2, 3, 4, 5]);
const sum = useArrayReduce(numbers, (acc, curr) => acc + curr, 0);

console.log(sum.value); // 15

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const totalPrice = useArrayReduce(items, (acc, item) => acc + item.price, 0);

console.log(totalPrice.value); // 60

useArrayFind

Reactive version of Array.prototype.find.

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

useArrayFindIndex

Reactive version of Array.prototype.findIndex.

/**
 * Reactive Array.findIndex
 * @param list - Source array (ref, getter, or value)
 * @param fn - Find predicate function
 * @returns Computed ref with found index or -1
 */
function useArrayFindIndex<T>(
  list: MaybeRefOrGetter<T[]>, 
  fn: (element: T, index: number, array: T[]) => boolean
): ComputedRef<number>;

useArrayFindLast

Reactive version of Array.prototype.findLast.

/**
 * Reactive Array.findLast
 * @param list - Source array (ref, getter, or value)
 * @param fn - Find predicate function
 * @returns Computed ref with last found element or undefined
 */
function useArrayFindLast<T>(
  list: MaybeRefOrGetter<T[]>, 
  fn: (element: T, index: number, array: T[]) => boolean
): ComputedRef<T | undefined>;

useArrayEvery

Reactive version of Array.prototype.every.

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

useArraySome

Reactive version of Array.prototype.some.

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

useArrayIncludes

Reactive version of Array.prototype.includes.

/**
 * Reactive Array.includes
 * @param list - Source array (ref, getter, or value)
 * @param value - Value to search for
 * @param fromIndex - Starting index for search
 * @returns Computed ref with boolean result
 */
function useArrayIncludes<T>(
  list: MaybeRefOrGetter<T[]>, 
  value: MaybeRefOrGetter<T>, 
  fromIndex?: MaybeRefOrGetter<number>
): ComputedRef<boolean>;

useArrayJoin

Reactive version of Array.prototype.join.

/**
 * Reactive Array.join
 * @param list - Source array (ref, getter, or value)
 * @param separator - Join separator string
 * @returns Computed ref with joined string
 */
function useArrayJoin<T>(
  list: MaybeRefOrGetter<T[]>, 
  separator?: MaybeRefOrGetter<string>
): ComputedRef<string>;

useArrayUnique

Get unique values from an array.

/**
 * Reactive unique array values
 * @param list - Source array (ref, getter, or value)
 * @param compareFn - Optional comparison function for custom uniqueness
 * @returns Computed ref with unique values
 */
function useArrayUnique<T>(
  list: MaybeRefOrGetter<T[]>, 
  compareFn?: (a: T, b: T) => boolean
): ComputedRef<T[]>;

Usage Example:

import { useArrayUnique, ref } from "@vueuse/shared";

const numbers = ref([1, 2, 2, 3, 3, 4]);
const unique = useArrayUnique(numbers);

console.log(unique.value); // [1, 2, 3, 4]

// With custom comparison
const users = ref([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' }, 
  { id: 1, name: 'John' }
]);

const uniqueUsers = useArrayUnique(users, (a, b) => a.id === b.id);
console.log(uniqueUsers.value); // [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }]

useArrayDifference

Get the difference between two arrays.

/**
 * Reactive array difference
 * @param list - Source array (ref, getter, or value)
 * @param values - Values to exclude (ref, getter, or value)
 * @param key - Optional key for object comparison
 * @returns Computed ref with difference array
 */
function useArrayDifference<T>(
  list: MaybeRefOrGetter<T[]>, 
  values: MaybeRefOrGetter<T[]>, 
  key?: keyof T
): ComputedRef<T[]>;

Usage Example:

import { useArrayDifference, ref } from "@vueuse/shared";

const list1 = ref([1, 2, 3, 4, 5]);
const list2 = ref([3, 4, 5, 6, 7]);

const difference = useArrayDifference(list1, list2);
console.log(difference.value); // [1, 2]

// With objects
const users1 = ref([
  { id: 1, name: 'John' },
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
]);

const users2 = ref([
  { id: 2, name: 'Jane' },
  { id: 3, name: 'Bob' }
]);

const userDiff = useArrayDifference(users1, users2, 'id');
console.log(userDiff.value); // [{ id: 1, name: 'John' }]

Install with Tessl CLI