Skip to content

useIDBKeyval ​

Category
Export Size
675 B
Package
@vueuse/integrations
Last Changed
last month

Wrapper for idb-keyval.

Demo ​

Available in the @vueuse/integrations add-on.

Install idb-keyval as a peer dependency ​

bash
npm install idb-keyval@^6

Usage ​

ts
import { useIDBKeyval } from '@vueuse/integrations/useIDBKeyval'

// bind object
const { data: storedObject, isFinished } = useIDBKeyval('my-idb-keyval-store', { hello: 'hi', greeting: 'Hello' })

// update object
storedObject.value.hello = 'hola'

// bind boolean
const flag = useIDBKeyval('my-flag', true) // returns Ref<boolean>

// bind number
const count = useIDBKeyval('my-count', 0) // returns Ref<number>

// awaiting IDB transaction
await count.set(10)
console.log('IDB transaction finished!')

// delete data from idb storage
storedObject.value = null

Type Declarations ​

typescript
export interface UseIDBOptions extends ConfigurableFlush {
  /**
   * Watch for deep changes
   *
   * @default true
   */
  deep?: boolean
  /**
   * On error callback
   *
   * Default log error to `console.error`
   */
  onError?: (error: unknown) => void
  /**
   * Use shallow ref as reference
   *
   * @default false
   */
  shallow?: boolean
  /**
   * Write the default value to the storage when it does not exist
   *
   * @default true
   */
  writeDefaults?: boolean
}
export interface UseIDBKeyvalReturn<T> {
  data: RemovableRef<T>
  isFinished: Ref<boolean>
  set: (value: T) => Promise<void>
}
/**
 *
 * @param key
 * @param initialValue
 * @param options
 */
export declare function useIDBKeyval<T>(
  key: IDBValidKey,
  initialValue: MaybeRefOrGetter<T>,
  options?: UseIDBOptions,
): UseIDBKeyvalReturn<T>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Fernando Fernández
Oleksandr Hyriavets
Doctorwu
Abdallah Alhaddad
Jimmy Sullivan
sun0day
Harmony Scarlet

Changelog ​

v10.9.0 on 2/27/2024
1b67d - fix: use toRaw instead of overriding the original object (#3805)
v10.8.0 on 2/20/2024
a086e - fix: stricter types
v10.4.0 on 8/25/2023
77a86 - feat(useIdbKeyval): ability to wait for IDB writes (#3338)
v10.0.0-beta.4 on 4/13/2023
4d757 - feat(types)!: rename MaybeComputedRef to MaybeRefOrGetter
0a72b - feat(toValue): rename resolveUnref to toValue
v10.0.0-beta.0 on 3/14/2023
ef281 - feat!: return format changed, add isFinished (#2474)
v9.6.0 on 11/22/2022
1d841 - fix: incorrect value init set (#2416)
v9.5.0 on 11/9/2022
acd16 - feat: new integration - Idb-keyval wrapper (#2335)

Released under the MIT License.