vue-local-vault

Reactive, encrypted browser storage for Vue — built on the Composition API, under 2KB gzipped, zero runtime dependencies.

Live demo: https://ysndmr.github.io/vue-local-vault/ Source: https://github.com/ysndmr/vue-local-vault Also available for: Angular (npm · demo) · React (npm · demo)

Install

npm i vue-local-vault

Supports Vue 3.3+.

Configure

import { createApp } from 'vue';
import { createVault } from 'vue-local-vault';
import App from './App.vue';

createApp(App)
  .use(createVault({ prefix: 'app_', encryptionKey: 'change-me', driver: 'local' }))
  .mount('#app');

Use

<script setup lang="ts">
import { useVault } from 'vue-local-vault';

const theme = useVault<'light' | 'dark'>('theme', 'light');
const token = useVault<string | null>('session-token', null, { expiresIn: '15m' });
</script>

<template>
  <button @click="theme = theme === 'light' ? 'dark' : 'light'">{{ theme }}</button>
</template>

expiresIn accepts ms, s, m, h, or d suffixes — '500ms', '30s', '15m', '2h', '1d'.

useVault returns a real Ref<T>, renders defaultValue on first paint, and hydrates from storage in onMounted — this keeps it safe to use with SSR frameworks (Nuxt) without hydration mismatches.

License

MIT