VueCraft NPM

Lists & Keys ​

useStorageList ​

A CRUD-oriented composable for a stored array of objects — built on useStorage, so it gets the same TTL/migrations/encrypt/compress/sign/sync pipeline, just shaped for a collection instead of a single value.

ts
function useStorageList<T extends object>(
  key: string,
  options?: UseStorageListOptions<T>,
): UseStorageListReturn<T>

Options ​

Accepts every useStorage option except defaultValue (the list always defaults to []), plus:

keyField ​

keyof T & string · default: 'id'

The property used to identify an item for update()/remove()/find().

Return value ​

items ​

Ref<T[]>

The full list, reactive.

isReady ​

Ref<boolean>

false until the initial read completes.

error ​

Ref<StorageError | null>

add ​

(item: T) => void

Appends an item.

update ​

(id: unknown, patch: Partial<T>) => void

Merges patch into the item whose keyField matches id.

remove ​

(id: unknown) => void

Removes the item whose keyField matches id.

find ​

(id: unknown) => ComputedRef<T | undefined>

A computed lookup for the item whose keyField matches id.

findAll ​

(predicate: (item: T) => boolean) => ComputedRef<T[]>

A computed filter over items.

clear ​

() => void

Removes the underlying storage key entirely (equivalent to useStorage's remove()).

set ​

(items: T[]) => void

Replaces the whole list at once.

Example ​

ts
import { useStorageList } from 'vue-storage-kit'

interface Todo {
  id: number
  text: string
  done: boolean
}

const { items: todos, add, update, remove, find } = useStorageList<Todo>('todos')

add({ id: 1, text: 'Write docs', done: false })
update(1, { done: true })

const todo = find(1) // ComputedRef<Todo | undefined>
remove(1)

useStorageKeys ​

A reactive list of keys currently present in a storage backend, optionally filtered by prefix. Re-scans automatically on storage events from other tabs.

ts
function useStorageKeys(prefix?: string, target?: StorageTarget): UseStorageKeysReturn

Both parameters are optional — prefix defaults to '' (all keys), target defaults to 'local'.

Return value ​

keys ​

Ref<string[]>

Keys currently in the backend matching prefix.

isReady ​

Ref<boolean>

false until the first scan completes.

refresh ​

() => Promise<void>

Re-scans immediately — normally only needed if you wrote to the backend through something other than this package's own composables (e.g. a raw localStorage.setItem call, which doesn't fire a same-tab storage event).

Example ​

ts
import { useStorageKeys } from 'vue-storage-kit'

// All keys under the "myapp:" prefix, in localStorage
const { keys, isReady } = useStorageKeys('myapp:', 'local')