[{"data":1,"prerenderedAt":457},["ShallowReactive",2],{"content-\u002Fdocs\u002Fdevtools-and-debugging\u002Fdevtools-panel":3},{"id":4,"title":5,"body":6,"description":435,"extension":436,"meta":437,"metaRows":438,"navigation":451,"path":452,"seo":453,"source":454,"stem":455,"__hash__":456},"docs\u002Fdocs\u002Fdevtools-and-debugging\u002Fdevtools-panel.md","The Attaform DevTools panel",{"type":7,"value":8,"toc":421},"minimark",[9,13,20,23,36,41,48,116,125,132,136,141,148,152,167,170,174,177,212,215,219,222,244,247,251,254,314,321,325,334,338,361,365,394,398,417],[10,11,5],"h1",{"id":12},"the-attaform-devtools-panel",[14,15,16],"blockquote",{},[17,18,19],"p",{},"A first-class native tab in the Nuxt DevTools sidebar. Every form's value, errors, aggregates, and event timeline, with an editable JSON tree for the values.",[21,22],"docs-meta-table",{},[17,24,25,26,30,31,35],{},"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 (",[27,28,29],"code",{},"Shift + Option + D"," opens the overlay) and pick ",[32,33,34],"strong",{},"Attaform"," in the sidebar to see it.",[37,38,40],"h2",{"id":39},"installing","Installing",[17,42,43,44,47],{},"The integration is automatic; adding ",[27,45,46],{},"attaform\u002Fnuxt"," to your Nuxt config wires the tab:",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F nuxt.config.ts: no devtools-specific config needed\nexport default defineNuxtConfig({\n  modules: ['attaform\u002Fnuxt'],\n  devtools: { enabled: true },\n})\n","ts","",[27,56,57,66,84,97,110],{"__ignoreMap":54},[58,59,62],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sJ8bj","\u002F\u002F nuxt.config.ts: no devtools-specific config needed\n",[58,67,69,73,76,80],{"class":60,"line":68},2,[58,70,72],{"class":71},"szBVR","export",[58,74,75],{"class":71}," default",[58,77,79],{"class":78},"sScJk"," defineNuxtConfig",[58,81,83],{"class":82},"sVt8B","({\n",[58,85,87,90,94],{"class":60,"line":86},3,[58,88,89],{"class":82},"  modules: [",[58,91,93],{"class":92},"sZZnC","'attaform\u002Fnuxt'",[58,95,96],{"class":82},"],\n",[58,98,100,103,107],{"class":60,"line":99},4,[58,101,102],{"class":82},"  devtools: { enabled: ",[58,104,106],{"class":105},"sj4cs","true",[58,108,109],{"class":82}," },\n",[58,111,113],{"class":60,"line":112},5,[58,114,115],{"class":82},"})\n",[17,117,118,119,121,122,124],{},"No peer dependency to add, no extension to install, no Vite plugin to configure. Open the Nuxt DevTools overlay (",[27,120,29],{}," or click the Nuxt logo in the bottom corner) and select ",[32,123,34],{}," from the sidebar.",[17,126,127,128,131],{},"The tab is dev-only; production builds skip the route injection and the ",[27,129,130],{},"@nuxt\u002Fdevtools-kit"," import entirely. Nothing ships in production.",[37,133,135],{"id":134},"what-you-see","What you see",[137,138,140],"h3",{"id":139},"form-list","Form list",[17,142,143,144,147],{},"One entry per registered form, keyed by the form's ",[27,145,146],{},"key",". Click a form to inspect it.",[137,149,151],{"id":150},"form-value","Form value",[17,153,154,155,158,159,162,163,166],{},"The current ",[27,156,157],{},"form.values"," as an interactive JSON tree. ",[32,160,161],{},"Editable from the panel:"," your edit flows through ",[27,164,165],{},"setValueAtPath"," and drives the whole reactive pipeline (validation, persistence opt-in, 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.",[17,168,169],{},"Values render verbatim. The panel is dev-only, so it doesn't mask passwords \u002F tokens \u002F secrets; debugging a credential flow typically needs the actual value. The sensitive-name heuristic still applies elsewhere in Attaform (persistence writes, multi-tab broadcasts), it's just not applied to the dev surface. 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.",[137,171,173],{"id":172},"schema-errors-user-errors","Schema Errors \u002F User Errors",[17,175,176],{},"The error map keyed by path, split by source:",[178,179,180,195],"ul",{},[181,182,183,186,187,190,191,194],"li",{},[32,184,185],{},"Schema Errors",": what the validator (Zod adapter) produced. Cleared by ",[27,188,189],{},"reset()"," \u002F ",[27,192,193],{},"handleSubmit"," success.",[181,196,197,200,201,190,204,207,208,211],{},[32,198,199],{},"User Errors",": what you wrote via ",[27,202,203],{},"setFieldErrors",[27,205,206],{},"addFieldErrors"," \u002F the ",[27,209,210],{},"parseApiErrors"," server-error pipeline. Persists across revalidation and successful submits.",[17,213,214],{},"Splitting them tells you instantly whether validation or your application code emitted each error.",[137,216,218],{"id":217},"aggregates","Aggregates",[17,220,221],{},"The reactive bundle:",[178,223,224,229,234,239],{},[181,225,226],{},[27,227,228],{},"submitting",[181,230,231],{},[27,232,233],{},"submissionAttempts",[181,235,236],{},[27,237,238],{},"submitError",[181,240,241],{},[27,242,243],{},"activeValidations",[17,245,246],{},"Useful for confirming your loading-state wiring is reading the right reactive thing.",[137,248,250],{"id":249},"timeline","Timeline",[17,252,253],{},"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.",[255,256,257,270],"table",{},[258,259,260],"thead",{},[261,262,263,267],"tr",{},[264,265,266],"th",{},"Event",[264,268,269],{},"Fires on",[271,272,273,288,302],"tbody",{},[261,274,275,281],{},[276,277,278],"td",{},[27,279,280],{},"form.change",[276,282,283,284,287],{},"Every mutation: register inputs, ",[27,285,286],{},"setValue",", array helpers, undo \u002F redo.",[261,289,290,295],{},[276,291,292],{},[27,293,294],{},"submit.success",[276,296,297,298,301],{},"A submit handler's ",[27,299,300],{},"onSubmit"," callback resolves.",[261,303,304,309],{},[276,305,306],{},[27,307,308],{},"reset",[276,310,311,313],{},[27,312,189],{}," completes.",[17,315,316,317,320],{},"Capacity is capped at 200 events per session; older entries fall off the back. Hit ",[32,318,319],{},"clear"," to wipe the log mid-debug.",[37,322,324],{"id":323},"sensitive-data-and-the-panel","Sensitive data and the panel",[17,326,327,328,333],{},"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. The same list of names (",[329,330,332],"a",{"href":331},"\u002Fdocs\u002Fpersistence\u002Fsensitive-names","Sensitive-name protection",") still gates persistence writes and multi-tab broadcasts.",[37,335,337],{"id":336},"whats-coming","What's coming",[178,339,340,346,355],{},[181,341,342,345],{},[32,343,344],{},"Field flags"," (touched \u002F focused \u002F blurred) in the inspector: values + errors are surfaced today, UI interaction state isn't.",[181,347,348,351,352,354],{},[32,349,350],{},"History stack visualization."," Undo \u002F redo snapshots show on the timeline via ",[27,353,280],{}," entries; the stack itself isn't a separate node yet.",[181,356,357,360],{},[32,358,359],{},"Persisted payload preview."," Inspect live form state in the inspector; for the serialized payload on disk, open Application → Storage in the browser DevTools.",[37,362,364],{"id":363},"caveats","Caveats",[178,366,367,373,388],{},[181,368,369,372],{},[32,370,371],{},"Panel edits bypass your component bindings."," Fine for poking at state during debugging; don't rely on the path mirroring production interaction exactly.",[181,374,375,378,379,382,383,387],{},[32,376,377],{},"Multi-app setups."," The Nuxt overlay panel reads from the most recent ",[27,380,381],{},"createAttaform()"," install; micro-frontend setups with parallel apps will only see one app's forms in the Nuxt panel. Reach for ",[329,384,386],{"href":385},"\u002Fdocs\u002Fdevtools-and-debugging\u002Fvue-devtools","Vue DevTools integration"," when you need per-app inspection.",[181,389,390,393],{},[32,391,392],{},"Screen-share hygiene."," The panel renders raw values. Close it before screen-sharing, the same way you'd close the browser DevTools console.",[37,395,397],{"id":396},"where-to-next","Where to next",[178,399,400,405,412],{},[181,401,402,404],{},[329,403,386],{"href":385},": the alternative for Vite \u002F bare-Vue projects, or as a complement on Nuxt.",[181,406,407,411],{},[329,408,410],{"href":409},"\u002Fdocs\u002Fdevtools-and-debugging\u002Ftroubleshooting","Troubleshooting",": what the panel surfaces, in narrative form.",[181,413,414,416],{},[329,415,332],{"href":331},": the list that gates persistence writes and multi-tab broadcasts.",[418,419,420],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":54,"searchDepth":68,"depth":68,"links":422},[423,424,431,432,433,434],{"id":39,"depth":68,"text":40},{"id":134,"depth":68,"text":135,"children":425},[426,427,428,429,430],{"id":139,"depth":86,"text":140},{"id":150,"depth":86,"text":151},{"id":172,"depth":86,"text":173},{"id":217,"depth":86,"text":218},{"id":249,"depth":86,"text":250},{"id":323,"depth":68,"text":324},{"id":336,"depth":68,"text":337},{"id":363,"depth":68,"text":364},{"id":396,"depth":68,"text":397},"Every registered form shows up in the Nuxt DevTools sidebar with values, errors, aggregates, and a timeline of every change. Auto-wired by attaform\u002Fnuxt, dev-gated at the module level.","md",{},[439,442,445,448],{"label":440,"value":441},"Category","Module",{"label":443,"value":444},"Where","Nuxt DevTools sidebar",{"label":446,"value":447,"kind":27},"Install","attaform\u002Fnuxt, nothing else",{"label":449,"value":450},"Production","route injection skipped, no @nuxt\u002Fdevtools-kit import",true,"\u002Fdocs\u002Fdevtools-and-debugging\u002Fdevtools-panel",{"title":5,"description":435},null,"docs\u002Fdevtools-and-debugging\u002Fdevtools-panel","XvksCvu5JUQvhLsEul-jj8TGphZngzatjaqayq4rhfE",1780949762221]