[{"data":1,"prerenderedAt":434},["ShallowReactive",2],{"content-\u002Fdocs\u002Fdevtools-and-debugging\u002Fdevtools-panel":3},{"id":4,"title":5,"body":6,"description":412,"extension":413,"meta":414,"metaRows":415,"navigation":428,"path":429,"seo":430,"source":431,"stem":432,"__hash__":433},"docs\u002Fdocs\u002Fdevtools-and-debugging\u002Fdevtools-panel.md","The Attaform DevTools panel",{"type":7,"value":8,"toc":398},"minimark",[9,13,20,23,36,41,48,116,125,132,136,141,148,152,167,170,174,177,205,208,212,215,237,240,244,247,307,314,318,321,325,342,346,376,380,394],[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, 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. 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,204],{},[32,198,199],{},"User Errors",": the manual error layer you wrote via ",[27,202,203],{},"setErrors"," (server errors included). Persists across revalidation and successful submits.",[17,206,207],{},"Splitting them tells you instantly whether validation or your application code emitted each error.",[137,209,211],{"id":210},"aggregates","Aggregates",[17,213,214],{},"The reactive bundle:",[178,216,217,222,227,232],{},[181,218,219],{},[27,220,221],{},"submitting",[181,223,224],{},[27,225,226],{},"submissionAttempts",[181,228,229],{},[27,230,231],{},"submitError",[181,233,234],{},[27,235,236],{},"activeValidations",[17,238,239],{},"Useful for confirming your loading-state wiring is reading the right reactive thing.",[137,241,243],{"id":242},"timeline","Timeline",[17,245,246],{},"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.",[248,249,250,263],"table",{},[251,252,253],"thead",{},[254,255,256,260],"tr",{},[257,258,259],"th",{},"Event",[257,261,262],{},"Fires on",[264,265,266,281,295],"tbody",{},[254,267,268,274],{},[269,270,271],"td",{},[27,272,273],{},"form.change",[269,275,276,277,280],{},"Every mutation: register inputs, ",[27,278,279],{},"setValue",", array helpers, undo \u002F redo.",[254,282,283,288],{},[269,284,285],{},[27,286,287],{},"submit.success",[269,289,290,291,294],{},"A submit handler's ",[27,292,293],{},"onSubmit"," callback resolves.",[254,296,297,302],{},[269,298,299],{},[27,300,301],{},"reset",[269,303,304,306],{},[27,305,189],{}," completes.",[17,308,309,310,313],{},"Capacity is capped at 200 events per session; older entries fall off the back. Hit ",[32,311,312],{},"clear"," to wipe the log mid-debug.",[37,315,317],{"id":316},"sensitive-data-and-the-panel","Sensitive data and the panel",[17,319,320],{},"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.",[37,322,324],{"id":323},"whats-coming","What's coming",[178,326,327,333],{},[181,328,329,332],{},[32,330,331],{},"Field flags"," (touched \u002F focused \u002F blurred) in the inspector: values + errors are surfaced today, UI interaction state isn't.",[181,334,335,338,339,341],{},[32,336,337],{},"History stack visualization."," Undo \u002F redo snapshots show on the timeline via ",[27,340,273],{}," entries; the stack itself isn't a separate node yet.",[37,343,345],{"id":344},"caveats","Caveats",[178,347,348,354,370],{},[181,349,350,353],{},[32,351,352],{},"Panel edits bypass your component bindings."," Fine for poking at state during debugging; don't rely on the path mirroring production interaction exactly.",[181,355,356,359,360,363,364,369],{},[32,357,358],{},"Multi-app setups."," The Nuxt overlay panel reads from the most recent ",[27,361,362],{},"createAttaform()"," install; micro-frontend setups with parallel apps will only see one app's forms in the Nuxt panel. Reach for ",[365,366,368],"a",{"href":367},"\u002Fdocs\u002Fdevtools-and-debugging\u002Fvue-devtools","Vue DevTools integration"," when you need per-app inspection.",[181,371,372,375],{},[32,373,374],{},"Screen-share hygiene."," The panel renders raw values. Close it before screen-sharing, the same way you'd close the browser DevTools console.",[37,377,379],{"id":378},"where-to-next","Where to next",[178,381,382,387],{},[181,383,384,386],{},[365,385,368],{"href":367},": the alternative for Vite \u002F bare-Vue projects, or as a complement on Nuxt.",[181,388,389,393],{},[365,390,392],{"href":391},"\u002Fdocs\u002Fdevtools-and-debugging\u002Ftroubleshooting","Troubleshooting",": what the panel surfaces, in narrative form.",[395,396,397],"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":399},[400,401,408,409,410,411],{"id":39,"depth":68,"text":40},{"id":134,"depth":68,"text":135,"children":402},[403,404,405,406,407],{"id":139,"depth":86,"text":140},{"id":150,"depth":86,"text":151},{"id":172,"depth":86,"text":173},{"id":210,"depth":86,"text":211},{"id":242,"depth":86,"text":243},{"id":316,"depth":68,"text":317},{"id":323,"depth":68,"text":324},{"id":344,"depth":68,"text":345},{"id":378,"depth":68,"text":379},"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",{},[416,419,422,425],{"label":417,"value":418},"Category","Module",{"label":420,"value":421},"Where","Nuxt DevTools sidebar",{"label":423,"value":424,"kind":27},"Install","attaform\u002Fnuxt, nothing else",{"label":426,"value":427},"Production","route injection skipped, no @nuxt\u002Fdevtools-kit import",true,"\u002Fdocs\u002Fdevtools-and-debugging\u002Fdevtools-panel",{"title":5,"description":412},null,"docs\u002Fdevtools-and-debugging\u002Fdevtools-panel","yHBsmMaX28BzU69nuzFgaMld7RDv8vmcNchGs-e6FaY",1781745874755]