Mocking

Mock Mode

Create rules in the UI (Mocks tab) or programmatically. The legacy flat API still works and proxies into a built-in default group:

const { addMock, removeMock } = useNetworkDashboard()

const rule = addMock({
  name: 'Mock /api/users',
  urlPattern: '/api/users',
  method: 'GET',
  enabled: true,
  response: {
    status: 200,
    body: [{ id: 1, name: 'Alice' }],
    delay: 200, // optional artificial latency in ms
  },
})

removeMock(rule.id)

Mocked responses are logged normally with a mock badge and metadata.mocked = true, so you can tell at a glance which entries were intercepted. Both Fetch and XHR are supported.

Mock Groups

Rules can be organised into named groups. Each group has its own enable/disable toggle — turning a group off suspends all its rules without losing their individual enabled states. Groups are collapsible; double-clicking a group name renames it inline.

const {
  addMockGroup,
  renameMockGroup,
  toggleMockGroup,
  removeMockGroup,
  addMockToGroup,
  updateMockInGroup,
  removeMockFromGroup,
  mockGroups, // Ref<readonly MockRulesGroup[]>
} = useNetworkDashboard()

// Create a group
const groupId = addMockGroup('Auth mocks')

// Add a rule to it
addMockToGroup(groupId, {
  urlPattern: '/api/refresh',
  method: 'POST',
  response: {
    status: 401,
    body: { error: 'token_expired' },
    delay: 300,
  },
})

// Disable the whole group (individual rule states are preserved)
toggleMockGroup(groupId, false)

// Rename
renameMockGroup(groupId, 'Auth & Session')

// Remove
removeMockGroup(groupId)

In the UI, clicking + in a group header opens an inline add/edit form directly within that group. Groups are persisted to localStorage under vue-network-dashboard:mockGroups when persistToStorage is enabled.

Mock Config Import / Export

The Mocks toolbar has Import and Export buttons.

Export serialises all groups and rules to a JSON file (mock-config.json):

{
  "version": 1,
  "groups": [
    {
      "id": "grp_a1b2c3",
      "name": "Auth mocks",
      "enabled": true,
      "rules": [
        {
          "id": "rule_x7y8z9",
          "urlPattern": "/api/refresh",
          "method": "POST",
          "enabled": true,
          "response": { "status": 401, "body": { "error": "token_expired" }, "delay": 300 }
        }
      ]
    }
  ]
}

Import reads the file and calls replaceMockGroups(), which replaces the entire configuration atomically — no ID conflicts, predictable behaviour.

// Programmatic replacement
const { replaceMockGroups } = useNetworkDashboard()
replaceMockGroups(parsedGroups)

Typical use-cases: switching between pre-built scenario files (happy path, auth errors, backend down), sharing a mock set with teammates, or loading a prepared configuration for a demo without touching the server.

Mock from Log

In the detail view of any captured HTTP request, click Mock to create a mock rule pre-filled with the URL path, method, status code, and response body from that log entry. The Mocks tab opens automatically with the new rule ready to edit or enable.

Mock Conditions

Mock rules can be narrowed with additional match conditions beyond URL and method. Add conditions in the rule editor under the Conditions section:

interface MockRule {
  // ...
  conditions?: {
    queryParams?: Record<string, string> // URL ?key=value pairs (all must match)
    headers?: Record<string, string> // Request header values (all must match)
    bodyFields?: Record<string, unknown> // JSON body field values (all must match)
  }
}

All conditions within a rule are AND-combined. For example, route the same POST /api/search to different mock responses depending on a field in the request body:

// Returns search results for user queries
dashboard.addMock({
  urlPattern: '/api/search',
  method: 'POST',
  conditions: { bodyFields: { type: 'user' } },
  response: { status: 200, body: { items: [{ id: 1, name: 'Alice' }] } },
})

// Returns empty list for product queries
dashboard.addMock({
  urlPattern: '/api/search',
  method: 'POST',
  conditions: { bodyFields: { type: 'product' } },
  response: { status: 200, body: { items: [] } },
})

Response Transform

Transform mode lets you modify a real server response without replacing it entirely. The request goes to the actual backend; after the response arrives the interceptor applies the declared transforms and returns the modified Response to your app. The log entry is marked mock to indicate the response was altered.

interface MockRule {
  mode?: 'mock' | 'transform' // default: 'mock'
  transform?: {
    status?: number // Override HTTP status code
    headers?: Record<string, string> // Add or overwrite response headers
    bodyMerge?: Record<string, unknown> // Deep-merge fields into JSON body
    bodyDelete?: string[] // Remove fields from JSON body
  }
}

Example — inject an isAdmin flag and remove an internal field:

dashboard.addMock({
  urlPattern: '/api/me',
  method: 'GET',
  mode: 'transform',
  enabled: true,
  response: { status: 200 }, // required field; ignored in transform mode
  transform: {
    bodyMerge: { isAdmin: true, beta: true },
    bodyDelete: ['internalId'],
  },
})

In the UI, switch between Mock and Transform using the mode toggle in the rule editor — the visible form fields update accordingly.

OpenAPI Import

Click OpenAPI in the Mocks toolbar to load an OpenAPI 3.x or Swagger 2.x JSON spec file. The parser generates one mock rule per path + method combination, builds an example response body from the schema, and adds all rules to a new group named after info.title.

// Example: load the Petstore spec → creates ~18 mock rules in one click
// All rules are added to a group: "Swagger Petstore"

The generated rules use mode: 'mock' with status 200 and a body derived from the first successful response schema. $ref references are resolved automatically. No external dependencies — the parser is ~120 lines of TypeScript.

After import, rules can be enabled individually, edited, or exported as a JSON config file like any other mock group.