Local Storage
Persist Vue state in localStorage with cross-tab sync.
useLocalStorage binds state to a localStorage entry. Values persist
across reloads, and changes sync across tabs via the storage event.
<script setup lang="ts">
import { } from 'kvantjs/vue'
import * as from 'kvantjs/schema'
const = ('theme', .(['light', 'dark']).('light'))
</script>
<template>
< @=" = === 'light' ? 'dark' : 'light'">
Theme: {{ }}
</>
</template>Setting a key to undefined removes its entry. Values equal to the
schema default are never written. Defaults stay internal.
Multiple composables bound to the same key stay in sync automatically.
Key maps work too:
const = ({
: .(['light', 'dark']).('light'),
: .().(16),
})
. = { ...., : .. + 1 }
.. += 1 // deeply reactive!Session storage
The same API exists for sessionStorage via useSessionStorage.
It is scoped to the current tab, cleared when the tab closes, and not shared across tabs:
import { } from 'kvantjs/vue'
const = ('draft', .().(''))Options
Prop
Type
Set options once for a component subtree using the provide function:
<script setup lang="ts">
import { } from 'kvantjs/vue'
({ : { : 'light' } })
</script>