DevTools#

Pinia-React can connect stores to the Redux DevTools Extension through the optional @pinia-react/devtools package.

This integration is intentionally separate from the core package and opt-in per store. It is a Redux DevTools integration, not a Vue Devtools integration.

Installation#

Install the core library, the DevTools plugin, and the Redux DevTools browser extension:

pnpm add pinia-react
pnpm add -D @pinia-react/devtools

Register the plugin immediately after creating the Pinia instance. Plugins are applied when a store is first created, so registration must happen before calling a store hook or getStore() helper.

import { createPinia } from 'pinia-react'
import { devtoolsPlugin } from '@pinia-react/devtools'

const pinia = createPinia()

if (import.meta.env.DEV) {
  pinia.use(devtoolsPlugin())
}

export { pinia }

The environment check is recommended for client-side applications, but it is not required for server rendering. The plugin does nothing when window or the Redux DevTools Extension is unavailable.

Enabling a Store#

Stores are not connected automatically. Add devtools.enabled: true to every store you want to inspect:

import { defineStore } from 'pinia-react'

export const { useCounterStore, getCounterStore } = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  },
  devtools: {
    enabled: true,
    name: 'Counter Store',
    trace: true
  }
})

enabled must be true. Omitting devtools leaves the store disconnected.

Naming Connections#

Each enabled store creates its own Redux DevTools connection. Use the plugin-level name to identify the application and the store-level name to identify the store:

pinia.use(devtoolsPlugin({ name: 'Admin' }))

defineStore('users', {
  state: () => ({ users: [] }),
  devtools: {
    enabled: true,
    name: 'Users'
  }
})

This connection appears as Admin: Users. Without custom names, the store ID is used.

Supported Operations#

The plugin sends the following committed mutations to Redux DevTools:

• Actions, using the action name and arguments.
• $patch() calls, including their Immer patches.
• $reset() calls.
• State restorations performed by plugins through the Pinia plugin API.

The current store state is initialized when the connection opens. From Redux DevTools, Pinia-React handles:

• Jump to state and jump to action.
• Rollback.
• Reset to the result of the store's state() function.
• Commit the current state as the new DevTools baseline.
• Import a Redux DevTools state history, restoring its final computed state.

State changes initiated by DevTools are not sent back as new mutations, which prevents feedback loops.

Options#

Plugin options#

Store options#

Current Limitations#

The plugin does not provide Vue Devtools features such as a Pinia inspector, component-to-store inspection, or a Pinia-specific timeline. It also does not add in-app UI. All inspection and state-history controls live in the Redux DevTools Extension.

Connection lifetime#

With lifecycle-enabled core, disposePinia(owner) and failed Store initialization release the Store's Mutation listener, the unsubscribe function returned by subscribe when present, and the connection's own unsubscribe when present. These are separate resources. Late messages are ignored. The plugin never calls extension-wide disconnect, so other Stores and instances keep their connections. Provider unmount alone does not close connections; the final owner must dispose explicitly after unmount.

Older core contexts without onDispose retain the previous runtime behavior; they do not gain complete resource disposal from upgrading this plugin alone.