VueCraft NPM

Vue Plugin ​

VueStoragePlugin — install it to configure a global key prefix, default target, and error handler.

ts
import { createApp } from 'vue'
import { VueStoragePlugin } from 'vue-storage-kit'
import App from './App.vue'

const app = createApp(App)

app.use(VueStoragePlugin, {
  prefix: 'myapp:', // all keys are prefixed automatically
  defaultTarget: 'local',
  onError: (err) => {
    if (err.type === 'quota-exceeded') showNotification('Storage full')
  },
})

app.mount('#app')

VueStoragePluginOptions ​

These apply to every useStorage() call (and anything built on it, like useStorageList()) made after the plugin is installed — not to useCookie, useIndexedDB/useIDBRef, or createPiniaPersist, which have their own independent options and don't read from the plugin.

prefix ​

string

Prepended to every storage key — useStorage('counter', ...) actually reads/writes myapp:counter. Two useStorage() calls for the same logical key installed with different prefixes are treated as distinct instances.

defaultTarget ​

StorageTarget

Used when a call doesn't pass target itself; an explicit target (including the one baked into useLocalStorage/useSessionStorage) always wins.

defaultSerializer ​

Serializer<unknown>

Fallback used when a call doesn't pass its own serializer.

defaultEncrypt ​

EncryptOptions

With encrypt: true, used as-is. With encrypt: { ... }, the call's options are merged on top — e.g. encrypt: { iterations: 200_000 } can override just one field while the password still comes from here.

onError ​

(err: StorageError) => void

Called in addition to (not instead of) any per-call onError — handy for app-wide logging/telemetry alongside call-site-specific handling.