tessl/npm-pinia-plugin-persistedstate

Configurable persistence and rehydration of Pinia stores with SSR-friendly Nuxt integration.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Plugin Configuration

Name: tessl/npm-pinia-plugin-persistedstate
Author: tessl

Core plugin creation and global configuration options for default behavior across all stores in a Pinia application.

Capabilities

Create Persisted State Plugin

Creates a Pinia persistence plugin with configurable global options.

/**
 * Create a Pinia persistence plugin
 * @param options - Global plugin configuration options
 * @returns Pinia plugin function
 */
function createPersistedState(options?: PluginOptions): (context: PiniaPluginContext) => void;

interface PluginOptions {
  /** Global storage backend for all stores */
  storage?: StorageLike;
  /** Enable debug logging globally */
  debug?: boolean;
  /** Global serializer for all stores */
  serializer?: Serializer;
  /** Global key generator function */
  key?: (storeKey: string) => string;
  /** Automatically persist all stores with global defaults */
  auto?: boolean;
}

Usage Examples:

import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate';

// Default plugin (equivalent to imported default)
const pinia = createPinia();
pinia.use(createPersistedState());

// Plugin with global options
pinia.use(createPersistedState({
  storage: sessionStorage,
  debug: true,
  key: (storeKey) => `myapp:${storeKey}`,
  auto: true, // All stores persist by default
}));

// Custom serializer example
pinia.use(createPersistedState({
  serializer: {
    serialize: (data) => btoa(JSON.stringify(data)), // Base64 encoded
    deserialize: (data) => JSON.parse(atob(data)),
  },
}));

Default Plugin Instance

Pre-configured plugin instance with default options, equivalent to createPersistedState().

/**
 * Default Pinia persistence plugin instance
 * Equivalent to createPersistedState() with no options
 */
declare const piniaPluginPersistedstate: (context: PiniaPluginContext) => void;

Usage Example:

import { createPinia } from 'pinia';
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

Configuration Options

Storage Option

Global storage backend that will be used by all stores unless overridden at the store level.

interface PluginOptions {
  storage?: StorageLike;
}

interface StorageLike {
  getItem: (key: string) => string | null;
  setItem: (key: string, value: string) => void;
}

Examples:

// Use sessionStorage globally
createPersistedState({
  storage: sessionStorage,
});

// Custom storage implementation
createPersistedState({
  storage: {
    getItem: (key) => localStorage.getItem(`custom:${key}`),
    setItem: (key, value) => localStorage.setItem(`custom:${key}`, value),
  },
});

Debug Option

Enables console error logging for persistence operations across all stores.

interface PluginOptions {
  debug?: boolean;
}

Serializer Option

Global serializer for converting state to/from storage strings.

interface PluginOptions {
  serializer?: Serializer;
}

interface Serializer {
  serialize: (data: any) => string;
  deserialize: (data: string) => any;
}

Default serializer behavior:

serialize: JSON.stringify
deserialize: destr (safe JSON parsing)

Key Generator Option

Global function to transform store keys before storage.

interface PluginOptions {
  key?: (storeKey: string) => string;
}

Usage Example:

createPersistedState({
  key: (storeKey) => `v2:${storeKey}:state`, // Prefix with version
});

Auto Persistence Option

When enabled, all stores will automatically persist unless explicitly disabled with persist: false.

interface PluginOptions {
  auto?: boolean;
}

Usage Example:

// All stores persist automatically
createPersistedState({ auto: true });

// Individual store opts out
export const useTemporaryStore = defineStore('temp', {
  state: () => ({ data: [] }),
  persist: false, // Explicitly disable
});

Install with Tessl CLI

npx tessl i tessl/npm-pinia-plugin-persistedstate

docs

index.md

nuxt-integration.md

plugin-configuration.md

store-persistence.md

tile.json

tessl/npm-pinia-plugin-persistedstate