explaingit

robinvdvleuten/vuex-persistedstate

★ 5,689JavaScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

A Vuex plugin that automatically persists and restores application state across page reloads using browser local storage, cookies, or custom storage backends. Supports Vue 2 and Vue 3. Note: no longer actively maintained.

Mindmap

mindmap
  root((vuex-persistedstate))
    Storage Options
      Local Storage
      Session Storage
      Cookies
      Custom Storage
    Configuration
      Path Selectors
      Mutation Filters
      Merge Control
      Encryption Support
    Vue Compatibility
      Vue 2 Vuex 3
      Vue 3 Vuex 4
    Use Cases
      Cart Persistence
      Auth State
      Form Progress
    SSR Support
      Nuxt js
      Server Safe
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Persist a shopping cart so its contents survive page refreshes without a database call.

USE CASE 2

Keep a user's logged-in status in local storage so they don't get logged out on reload.

USE CASE 3

Save form progress to session storage so partially filled forms are not lost on accidental navigation.

USE CASE 4

Persist selected app preferences or theme settings across browser sessions.

Tech stack

JavaScriptVuexVue.jsLocalStorageNuxt.js

Getting it running

Difficulty · easy Time to first run · 5min

Add one line to your Vuex store config. Works out of the box with localStorage. No longer actively maintained, evaluate alternatives for new projects.

License not mentioned in the explanation.

In plain English

This is a plugin for Vuex, which is the state management system used in Vue.js web applications. The problem it solves is simple: when a user refreshes a web page, all the in-memory data your app was holding (shopping cart contents, logged-in status, form progress) gets wiped. This library saves that data to the browser's local storage automatically so it survives page reloads, then restores it when the page loads again. The README opens with a clear notice that the project is no longer actively maintained. The author stopped working with Vue.js day-to-day and decided to stop spending personal time on it. The package remains available and usable, but no active support or updates should be expected. For developers who want to use it anyway, setup is a single line added to an existing Vuex store configuration. By default it saves the entire application state to local storage under the key "vuex". You can configure it to save only specific pieces of state using dot-notation path selectors, which is useful when you have large stores and only want to persist certain parts. Storage is configurable. Instead of local storage, you can point it at cookies, session storage, or any custom storage object that implements read and write methods. This makes it compatible with server-side rendering setups like Nuxt.js, where local storage is not available on the server. Other options let you filter which state mutations trigger a save, control how restored data merges with default state, encrypt stored values using third-party libraries, and run a callback once restoration is complete. The library works with both Vuex 4 (Vue 3) and older Vuex 3 (Vue 2) via a separate branch.

Copy-paste prompts

Prompt 1
I'm using vuex-persistedstate in my Vue 3 app. How do I configure it to persist only the 'cart' and 'user' modules, not the entire store?
Prompt 2
Show me how to set up vuex-persistedstate with cookies instead of localStorage so it works with Nuxt.js server-side rendering.
Prompt 3
How do I encrypt the state saved by vuex-persistedstate using a third-party library before it's written to localStorage?
Prompt 4
My vuex-persistedstate restored state is overwriting my store's default values in an unexpected way. How do I control how restored data is merged with defaults?
Prompt 5
What's the migration path if I need to replace vuex-persistedstate in a Vue 3 app since it's no longer maintained, what are the alternatives?
Open on GitHub → Explain another repo

← robinvdvleuten on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.