useLocalStorage

Persist refs into local or session storage for simple settings and drafts.

Use this composable when a local preference or draft should survive page refreshes without introducing a larger state layer.

Current theme preference: light

import { defineComponent } from 'vue';
import { useLocalStorage } from '@tile-ui/vue';
 
export default defineComponent({
	name: 'UseLocalStorageDemo',
	setup() {

Registry install

pnpm dlx shadcn@latest add @tile-ui/use-local-storage

Usage

const value = useLocalStorage('theme', 'light');

What it covers

  • Local storage reads and writes
  • Safe initialization in browser-only contexts
  • Ref-based ergonomics that fit standard Vue composition

Common use cases

  • Theme preferences
  • Persisted filters
  • Draft values in admin tools