Track Vuex and Pinia state

@oxvo/browser-vuex extends @oxvo/browser with store-level state visibility.

Install the plugin

npm i @oxvo/browser-vuex

Configure one reusable state connector

import { browser } from '@oxvo/browser';
import browserVuex from '@oxvo/browser-vuex';

browser.configure({
  workspaceId: 'YOUR_WORKSPACE_ID',
});

const connectState = browser.use(
  browserVuex({
    filter: mutation => !mutation.type.startsWith('ui/'),
    transformer: state => ({
      auth: state.auth,
      checkout: state.checkout,
    }),
    mutationTransformer: mutation => ({
      type: mutation.type,
      payload: mutation.payload,
    }),
  })
);

Integrate with Vuex

import { createStore } from 'vuex';

const store = createStore({
  // ...
  plugins: [connectState('main-store')],
});

await browser.start();

connectState('main-store') returns the Vuex-compatible store plugin function.

Integrate with Pinia

import { useCheckoutStore } from '@/stores/checkout';

const checkoutStore = useCheckoutStore();
connectState('checkout-store')(checkoutStore);

await browser.start();

Pinia support uses $onAction internally and tracks action invocations with current store state.

Plugin option reference

Option	Default	Purpose
filter(mutation, state)	() => true	Decide whether to capture this update
transformer(state)	state => state	Shape/redact root state before capture
mutationTransformer(mutation)	mutation => mutation	Shape mutation/action payload before capture

Data minimization pattern

Use transformer and mutationTransformer to remove secrets and reduce payload size:

const connectState = browser.use(
  browserVuex({
    transformer: state => ({
      auth: {
        userId: state.auth.userId,
        role: state.auth.role,
      },
      cart: {
        itemsCount: state.cart.items.length,
        total: state.cart.total,
      },
    }),
    mutationTransformer: mutation => ({
      type: mutation.type,
    }),
  })
);

Tip: Assign explicit store names so replay timelines are easy to scan when multiple stores are active.

📷 Image (optional): Store state timeline in replay investigation
Why: Shows how mutation/action entries and sanitized state snapshots appear during debugging.
File: docs/images/sdk-vuex-pinia-state-timeline.png
AI prompt: "Clean documentation UI mock of OXVO replay timeline showing state actions from Vuex/Pinia with store labels, mutation names, and sanitized state diff panel, modern SaaS style, neutral colors with primary accent, crisp typography, synthetic app data only, 1600x1000."