Attaform
.md

The Attaform DevTools panel

A first-class native tab in the Nuxt DevTools sidebar. Every form's value, errors, aggregates, per-field state, and event timeline, with an editable JSON tree for the values.

Category
Module
Where
Nuxt DevTools sidebar
Install
attaform/nuxt, nothing else
Production
route injection skipped, no @nuxt/devtools-kit import

This page is code-only; the panel lives in your browser's Nuxt DevTools overlay, not inside the docs site. Open any Nuxt-powered Attaform consumer in dev (Shift + Option + D opens the overlay) and pick Attaform in the sidebar to see it.

Installing

The integration is automatic; adding attaform/nuxt to your Nuxt config wires the tab:

// nuxt.config.ts: no devtools-specific config needed
export default defineNuxtConfig({
  modules: ['attaform/nuxt'],
  devtools: { enabled: true },
})

No peer dependency to add, no extension to install, no Vite plugin to configure. Open the Nuxt DevTools overlay (Shift + Option + D or click the Nuxt logo in the bottom corner) and select Attaform from the sidebar.

The tab is dev-only; production builds skip the route injection and the @nuxt/devtools-kit import entirely. Nothing ships in production.

What you see

Form list

One entry per registered form, keyed by the form's key. Click a form to inspect it.

Form value

The current form.values as an interactive JSON tree. Editable from the panel: your edit flows through setValueAtPath and drives the whole reactive pipeline (validation, history). The panel writes back into the same store the form reads from, so a value edited in DevTools is indistinguishable from one typed into an input.

Values render verbatim. The panel is dev-only, so it doesn't mask passwords / tokens / secrets; debugging a credential flow typically needs the actual value. Close the panel before a screen share if a value would be sensitive on camera, the same hygiene as the browser's own DevTools console.

Field state

Click any key in the value tree and a Field state section opens beneath it for that path: connected, touched, focused, blurred, updatedAt, the schema and user error counts side by side, every error message with its code, and the value at that path. Click the same key again, or the × in the section header, to close it.

This is the panel's answer to "the field looks wrong and I can't tell why": the interaction flags and the two error layers for one path, in one place, without reaching into form.fields from a breakpoint.

Schema Errors / User Errors

The error map keyed by path, split by source:

  • Schema Errors: what the validator (Zod adapter) produced. Recomputed on every validation pass, so they track the current values.
  • User Errors: the manual error layer you wrote via setErrors (server errors included). Never re-derived, so an entry sits here until something clears it: clearErrors, reset(), or the next handleSubmit, which wipes the layer on entry.

Splitting them tells you instantly whether validation or your application code emitted each error.

Aggregates

The reactive bundle:

  • submitting
  • submissionAttempts
  • submitError
  • activeValidations, the in-flight validation count that form.meta.validating reads as a boolean

Useful for confirming your loading-state wiring is reading the right reactive thing.

Timeline

A scrollable log of recent events. Each entry shows a timestamp, an event type, and the form key, with the form value at the moment of fire available on click.

EventFires on
form.changeEvery mutation: register inputs, setValue, array helpers, undo / redo.
submit.successA submit handler's onSubmit callback resolves.
resetreset() completes.

Capacity is capped at 200 events per session; older entries fall off the back. Hit clear to wipe the log mid-debug.

Sensitive data and the panel

The panel renders form values raw. DevTools is a dev-only surface, and redacting across every place a value surfaces (panels, logs, network tabs, breakpoints, source maps) is impractical security theater, not a real safeguard. For production-data spelunking on a sensitive surface, use a non-prod environment with synthetic data instead.

What's coming

  • History stack visualization. Undo / redo snapshots show on the timeline via form.change entries; the stack itself isn't a separate node yet.

Caveats

  • Panel edits bypass your component bindings. Fine for poking at state during debugging; don't rely on the path mirroring production interaction exactly.
  • Multi-app setups. The Nuxt overlay panel reads from the most recent createAttaform() install; micro-frontend setups with parallel apps will only see one app's forms in the Nuxt panel. Reach for Vue DevTools integration when you need per-app inspection.
  • Screen-share hygiene. The panel renders raw values. Close it before screen-sharing, the same way you'd close the browser DevTools console.

Where to next

Edit this page on GitHub