persist-ui/src/vue.ts

Universal input persistence for Vanilla, React, Vue, Astro, Next.js etc. with secure AES encryption.

import { ref, onMounted, onBeforeUnmount } from "vue";
import { persistUI } from "./core";

export function usePersistUI(
    key: string,
    opts?: Partial<{
        debounce: number;
        encrypt: boolean;
        encryptionSecret: string;
        ignoreTypes: string[];
        onRestore: (data: Record<string, any>) => void;
        clearOnSubmit: boolean;
        submitSelector: string;
        resetOnUnmount?: boolean;
    }>
) {
    // No type constraint to support all element types
    const elRef = ref(null);
    let persistInstance: ReturnType<typeof persistUI.attach> | null = null;

    onMounted(() => {
        if (elRef.value) {
            persistInstance = persistUI.attach(elRef.value, {
                key,
                ...opts
            });
        }
    });

    onBeforeUnmount(() => {
        // Only reset on unmount if explicitly requested
        if (opts?.resetOnUnmount) {
            persistInstance?.reset();
        }
    });

    return elRef;
}