vue3-storage

library0.1.11jsnpmunverified

A Vue 3 plugin for working with local storage, session storage, and WebSQL from the Vue context, inspired by tarojs and vue-ls. Current stable version 0.1.11 supports Vue 3.x only. Provides both synchronous and asynchronous APIs with TypeScript types, namespace support, and expiration handling. Differentiators include promise-based async storage, sync/async methods, and built-in expiration checking. Package is small, with peer dependencies on core-js and vue.

storage

npm install vue3-storage

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE3-STORAGE

vue3-storage

storagejavascriptv0.1.11

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Vue3Storage

✓ import Vue3Storage from 'vue3-storage';

✗ const Vue3Storage = require('vue3-storage');

Default import; ESM only, requires vue 3.

useStorage

✓ import { useStorage } from 'vue3-storage';

✗ const { useStorage } = require('vue3-storage');

Named import for Composition API; must be called inside setup() or <script setup>.

StorageType

✓ import { StorageType } from 'vue3-storage';

Enum used for options: StorageType.Local / Session / WebSQL.

Shows plugin registration, sync and async storage operations, and expiration handling.

import { createApp } from 'vue'; import Vue3Storage, { StorageType, useStorage } from 'vue3-storage'; const app = createApp(App); app.use(Vue3Storage, { namespace: 'myapp_', storage: StorageType.Local }); // In component setup() const setup = () => { const storage = useStorage(); // Sync set storage.setStorageSync('token', 'abc123', 3600); // expire after 1 hour // Sync get const token = storage.getStorageSync('token'); // Async set with promise storage.setStorage({ key: 'user', data: { name: 'John' } }) .then(res => console.log(res.errMsg)) .catch(err => console.error(err)); // Check expiration if (storage.isExpire('token')) { // refresh token } // Async get storage.getStorage({ key: 'user' }).then(res => { console.log(res.data); }); return { token }; };

Debug

Known issues

gotchauseStorage() must be called inside a Vue component's setup() function or <script setup> block, otherwise it will throw an error.

fix

Ensure useStorage() is called within the setup context of a Vue component.

affects: >=0.1.0

gotchaThe namespace option defaults to 'pro_'. If you forget to set it, all keys will be prefixed with 'pro_', which may cause unexpected behavior when reading/writing storage.

fix

Explicitly set namespace to an empty string or your desired prefix.

affects: >=0.1.0

deprecatedThe plugin options 'namespace' and 'storage' must be passed to app.use(). There is no way to change them after initialization.

fix

Plan configuration at app creation; re-create app if you need different settings.

affects: >=0.1.0

gotchaSynchronous methods (setStorageSync, getStorageSync) may block the main thread if storage operations are slow, especially with WebSQL.

fix

Prefer async methods (setStorage, getStorage) for non-blocking operations.

affects: >=0.1.0

Errors

Common errors & fixes

Uncaught TypeError: Cannot read properties of undefined (reading 'setStorageSync')

useStorage() was called outside of setup() context, returning undefined.

fix

Move the call inside setup() or <script setup> of a Vue component.

TypeError: vue3_storage_1.default is not a function

Using CommonJS require() with an ESM-only package.

fix

Use ES module import: import Vue3Storage from 'vue3-storage'

Error: [vue3-storage] namespace is required

Missing namespace in plugin options.

fix

Provide options object with namespace: { namespace: 'yourNamespace_', storage: StorageType.Local }

Upgrade

Version history

0.1.11latest on npm

Audit

Dependencies

core-jsrequiredPeer dependency required for runtime polyfills in older browsers

vuerequiredPeer dependency required; plugin integrates with Vue 3's app instance

Agent activity

33 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/aesoper101/vue3-storage ↗

packagevue3-storage ↗

homepagehttps://github.com/aesoper101/vue3-storage#readme ↗