[{"data":1,"prerenderedAt":435},["ShallowReactive",2],{"content-\u002Fdocs\u002Frecipes\u002Fdevtools":3},{"id":4,"title":5,"body":6,"description":16,"extension":428,"meta":429,"navigation":430,"path":431,"seo":432,"stem":433,"__hash__":434},"docs\u002Fdocs\u002Frecipes\u002Fdevtools.md","Vue DevTools",{"type":7,"value":8,"toc":417},"minimark",[9,13,17,22,25,55,58,118,125,129,132,178,181,185,190,200,261,265,268,328,331,335,346,368,372,395,399,413],[10,11,5],"h1",{"id":12},"vue-devtools",[14,15,16],"p",{},"Every registered form shows up in the Vue DevTools sidebar with an\neditable tree, an error view, and a timeline for submit \u002F reset \u002F\nmutation events.",[18,19,21],"h2",{"id":20},"setup","Setup",[14,23,24],{},"Install the peer dep:",[26,27,32],"pre",{"className":28,"code":29,"language":30,"meta":31,"style":31},"language-bash shiki shiki-themes github-light github-dark","npm install -D @vue\u002Fdevtools-api\n","bash","",[33,34,35],"code",{"__ignoreMap":31},[36,37,40,44,48,52],"span",{"class":38,"line":39},"line",1,[36,41,43],{"class":42},"sScJk","npm",[36,45,47],{"class":46},"sZZnC"," install",[36,49,51],{"class":50},"sj4cs"," -D",[36,53,54],{"class":46}," @vue\u002Fdevtools-api\n",[14,56,57],{},"That's it — the plugin auto-wires when the dep is present:",[26,59,63],{"className":60,"code":61,"language":62,"meta":31,"style":31},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F main.ts\ncreateApp(App)\n  .use(createAttaform()) \u002F\u002F devtools: true by default\n  .mount('#app')\n","ts",[33,64,65,71,81,102],{"__ignoreMap":31},[36,66,67],{"class":38,"line":39},[36,68,70],{"class":69},"sJ8bj","\u002F\u002F main.ts\n",[36,72,74,77],{"class":38,"line":73},2,[36,75,76],{"class":42},"createApp",[36,78,80],{"class":79},"sVt8B","(App)\n",[36,82,84,87,90,93,96,99],{"class":38,"line":83},3,[36,85,86],{"class":79},"  .",[36,88,89],{"class":42},"use",[36,91,92],{"class":79},"(",[36,94,95],{"class":42},"createAttaform",[36,97,98],{"class":79},"()) ",[36,100,101],{"class":69},"\u002F\u002F devtools: true by default\n",[36,103,105,107,110,112,115],{"class":38,"line":104},4,[36,106,86],{"class":79},[36,108,109],{"class":42},"mount",[36,111,92],{"class":79},[36,113,114],{"class":46},"'#app'",[36,116,117],{"class":79},")\n",[14,119,120,121,124],{},"Supports DevTools v6 and v7 (",[33,122,123],{},"@vue\u002Fdevtools-api"," v6.6+).",[18,126,128],{"id":127},"disabling","Disabling",[14,130,131],{},"Skip the wiring in production, keep it in dev:",[26,133,135],{"className":60,"code":134,"language":62,"meta":31,"style":31},"import.meta.env.PROD ? createAttaform({ devtools: false }) : createAttaform()\n",[33,136,137],{"__ignoreMap":31},[36,138,139,143,146,149,152,155,158,161,164,167,170,173,175],{"class":38,"line":39},[36,140,142],{"class":141},"szBVR","import",[36,144,145],{"class":79},".",[36,147,148],{"class":50},"meta",[36,150,151],{"class":79},".env.",[36,153,154],{"class":50},"PROD",[36,156,157],{"class":141}," ?",[36,159,160],{"class":42}," createAttaform",[36,162,163],{"class":79},"({ devtools: ",[36,165,166],{"class":50},"false",[36,168,169],{"class":79}," }) ",[36,171,172],{"class":141},":",[36,174,160],{"class":42},[36,176,177],{"class":79},"()\n",[14,179,180],{},"If the peer dep isn't installed at runtime, nothing breaks — the\nplugin silently skips setup.",[18,182,184],{"id":183},"what-you-see","What you see",[186,187,189],"h3",{"id":188},"inspector","Inspector",[14,191,192,195,196,199],{},[33,193,194],{},"Attaform"," shows up alongside \"Pinia\", \"Router\", etc.\nExpand it to see one node per registered form (keyed by the form's\n",[33,197,198],{},"key","). Select a form to view:",[201,202,203,215,221],"ul",{},[204,205,206,210,211,214],"li",{},[207,208,209],"strong",{},"Form value"," — the current form as a JSON tree. Editable from\nthe DevTools UI; your edit flows through ",[33,212,213],{},"setValue"," and drives\nthe whole reactive pipeline (validation, persistence, history).",[204,216,217,220],{},[207,218,219],{},"Errors"," — the error map keyed by path.",[204,222,223,226,227,230,231,234,235,238,239,234,242,234,245,234,248,238,251,234,254,234,257,260],{},[207,224,225],{},"Aggregates"," — the ",[33,228,229],{},"state"," bundle (",[33,232,233],{},"isDirty",", ",[33,236,237],{},"isValid",",\n",[33,240,241],{},"isSubmitting",[33,243,244],{},"isValidating",[33,246,247],{},"submitCount",[33,249,250],{},"submitError",[33,252,253],{},"canUndo",[33,255,256],{},"canRedo",[33,258,259],{},"historySize",").",[186,262,264],{"id":263},"timeline","Timeline",[14,266,267],{},"A \"Attaform\" timeline layer logs:",[269,270,271,284],"table",{},[272,273,274],"thead",{},[275,276,277,281],"tr",{},[278,279,280],"th",{},"Event",[278,282,283],{},"Fires on",[285,286,287,301,315],"tbody",{},[275,288,289,295],{},[290,291,292],"td",{},[33,293,294],{},"form.change",[290,296,297,298,300],{},"Every mutation — register inputs, ",[33,299,213],{},", array helpers, undo \u002F redo.",[275,302,303,308],{},[290,304,305],{},[33,306,307],{},"submit.success",[290,309,310,311,314],{},"A submit handler's ",[33,312,313],{},"onSubmit"," resolves.",[275,316,317,322],{},[290,318,319],{},[33,320,321],{},"reset",[290,323,324,327],{},[33,325,326],{},"reset()"," completes.",[14,329,330],{},"Hover a timeline event to see the form state at that moment.",[18,332,334],{"id":333},"keeping-production-bundles-clean","Keeping production bundles clean",[14,336,337,338,341,342,345],{},"The DevTools module is code-split — bundlers emit it as a separate\nchunk, and the dynamic ",[33,339,340],{},"import()"," only fires when ",[33,343,344],{},"devtools: true",".\nFor a zero-overhead production build:",[347,348,349,355],"ol",{},[204,350,351,352,145],{},"Pass ",[33,353,354],{},"{ devtools: false }",[204,356,357,358,360,361,364,365,145],{},"Keep ",[33,359,123],{}," in ",[33,362,363],{},"devDependencies",", not ",[33,366,367],{},"dependencies",[18,369,371],{"id":370},"not-included-yet","Not included (yet)",[201,373,374,380,389],{},[204,375,376,379],{},[207,377,378],{},"Field flags"," (touched \u002F focused \u002F blurred). The inspector\nshows values + errors; UI interaction state is omitted.",[204,381,382,385,386,388],{},[207,383,384],{},"History stack visualisation."," Undo \u002F redo snapshots show on\nthe timeline via ",[33,387,294],{}," entries, but the stack itself\nisn't a separate node. Open an issue if your editor workflow\nneeds it.",[204,390,391,394],{},[207,392,393],{},"Persisted payload preview."," Inspect the live form state in\nthe inspector; for the serialised payload on disk, open\nApplication → Storage in the browser devtools.",[18,396,398],{"id":397},"caveats","Caveats",[201,400,401,407],{},[204,402,403,406],{},[207,404,405],{},"DevTools edits bypass your component bindings."," Fine for\npoking at state during debugging; don't rely on the path\nmirroring production interaction exactly.",[204,408,409,412],{},[207,410,411],{},"Multi-app setups."," Each Vue app registers its own inspector\nentry.",[414,415,416],"style",{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .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);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":31,"searchDepth":73,"depth":73,"links":418},[419,420,421,425,426,427],{"id":20,"depth":73,"text":21},{"id":127,"depth":73,"text":128},{"id":183,"depth":73,"text":184,"children":422},[423,424],{"id":188,"depth":83,"text":189},{"id":263,"depth":83,"text":264},{"id":333,"depth":73,"text":334},{"id":370,"depth":73,"text":371},{"id":397,"depth":73,"text":398},"md",{},true,"\u002Fdocs\u002Frecipes\u002Fdevtools",{"title":5,"description":16},"docs\u002Frecipes\u002Fdevtools","L87rsTn_JVYywaPvzCQuz5cqO-1Bxib3oDMx5MXD-WI",1777934136321]