Vue Academy · Lesson

Pinia Persistence and Devtools

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

Lesson 4 of 413 steps

Pinia Persistence and Devtools is a free Vue Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, and your progress syncs across the web and the CoddyKit app. The Vue Academy course includes 4 lessons in total.

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.

Answer it in the interactive lesson

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.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 42
Lessons: 156

Start learning free View the full course

Frequently Asked Questions

Is the “Pinia Persistence and Devtools” lesson free?

Yes — any 3 lessons of the Vue Academy learning path, including “Pinia Persistence and Devtools”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Vue Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.

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