Vue Academy · Lesson

Pinia Persistence and Devtools

pinia-plugin-persistedstate, persisting only specific fields, Pinia devtools time-travel.

Pinia Persistence and Devtools is a free Vue Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Persisting Store State

By default, Pinia state is lost on page reload. To keep it, use the pinia-plugin-persistedstate plugin, which syncs state to localStorage or sessionStorage.

Installing the Plugin

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

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

Enabling Persistence on a Store

Set persist: true in the store options. Now the whole state is saved and restored automatically.

export const useUserStore = defineStore('user', {
  state: () => ({ name: '', token: '' }),
  persist: true
})

Choosing Storage

The storage option picks where to save. Use sessionStorage for data that should clear when the tab closes.

persist: {
  storage: sessionStorage
}

Persisting Only Some Fields

The paths option limits which state keys are saved. This is ideal for keeping a token but not transient UI flags.

persist: {
  paths: ['token', 'name'] // 'isLoading' not persisted
}

Store Serialization

Persistence works by serializing state to JSON. Values must be JSON-safe — plain objects, arrays, strings, numbers. Functions, Maps, and class instances need a custom serializer.

persist: {
  serializer: {
    serialize: JSON.stringify,
    deserialize: JSON.parse
  }
}

Pinia Devtools

With Vue Devtools installed, Pinia adds a dedicated panel. You can inspect each store, watch state change live, and edit values directly.

Time-Travel Debugging

Every action shows up on the devtools timeline. You can time-travel: jump back to a previous state to reproduce a bug, then step forward again.

SSR and Store Hydration

In server-side rendering, the server fills the store, then the client must hydrate with the same data so markup matches. Mismatched state causes hydration warnings.

Pinia With Nuxt

The @pinia/nuxt module wires Pinia into Nuxt and handles SSR hydration automatically. State filled during server render is serialized into the page and restored on the client.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@pinia/nuxt']
})

Combining Persistence With SSR

Be careful: localStorage does not exist on the server. Persistence plugins detect this and only run client-side, so SSR hydration uses server state and persistence layers on afterward.

Quick Check

Test your knowledge of persistence and devtools.

Recap

You learned persistence and tooling:

pinia-plugin-persistedstate saves state to local/session storage.
storage and paths options control where and what is saved.
State is serialized to JSON, so values must be JSON-safe.
Devtools offer live inspection and time-travel; @pinia/nuxt handles SSR hydration.

Frequently asked questions

Is the “Pinia Persistence and Devtools” lesson free?

Yes — the full text of “Pinia Persistence and Devtools” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Pinia Persistence and Devtools”?

pinia-plugin-persistedstate, persisting only specific fields, Pinia devtools time-travel. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pinia Persistence and Devtools” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy