[{"data":1,"prerenderedAt":376},["ShallowReactive",2],{"content-\u002Fdocs\u002Fgetting-started\u002Finstallation":3},{"id":4,"title":5,"body":6,"description":368,"extension":369,"meta":370,"metaRows":371,"navigation":180,"path":372,"seo":373,"source":371,"stem":374,"__hash__":375},"docs\u002Fdocs\u002Fgetting-started\u002Finstallation.md","Installation",{"type":7,"value":8,"toc":362},"minimark",[9,13,20,23,27,39,44,47,102,118,122,133,232,241,245,252,329,335,339,358],[10,11,5],"h1",{"id":12},"installation",[14,15,16],"blockquote",{},[17,18,19],"p",{},"One command. Attaform bootstraps itself.",[17,21,22],{},"Install Attaform and Zod, and you're set.",[24,25],"ui-install-command",{":show-quick-start":26},"false",[17,28,29,30,34,35,38],{},"That's it for most apps. ",[31,32,33],"code",{},"useForm"," and the ",[31,36,37],{},"v-register"," directive are ready to use as soon as the package is installed. Everything below this section is opt-in.",[40,41,43],"h2",{"id":42},"optional-nuxt-module","Optional: Nuxt module",[17,45,46],{},"If you're on Nuxt, we recommend installing the module:",[48,49,54],"pre",{"className":50,"code":51,"language":52,"meta":53,"style":53},"language-ts shiki shiki-themes github-light github-dark","\u002F\u002F nuxt.config.ts\nexport default defineNuxtConfig({\n  modules: ['attaform\u002Fnuxt'],\n})\n","ts","",[31,55,56,65,83,96],{"__ignoreMap":53},[57,58,61],"span",{"class":59,"line":60},"line",1,[57,62,64],{"class":63},"sJ8bj","\u002F\u002F nuxt.config.ts\n",[57,66,68,72,75,79],{"class":59,"line":67},2,[57,69,71],{"class":70},"szBVR","export",[57,73,74],{"class":70}," default",[57,76,78],{"class":77},"sScJk"," defineNuxtConfig",[57,80,82],{"class":81},"sVt8B","({\n",[57,84,86,89,93],{"class":59,"line":85},3,[57,87,88],{"class":81},"  modules: [",[57,90,92],{"class":91},"sZZnC","'attaform\u002Fnuxt'",[57,94,95],{"class":81},"],\n",[57,97,99],{"class":59,"line":98},4,[57,100,101],{"class":81},"})\n",[17,103,104,105,107,108,107,111,107,114,117],{},"What this gets you: ",[31,106,33],{}," \u002F ",[31,109,110],{},"useWizard",[31,112,113],{},"injectForm",[31,115,116],{},"useRegister"," as auto-imports, the SSR hydration plumbing, the Vite plugin, and the Attaform tab inside Nuxt DevTools.",[40,119,121],{"id":120},"optional-vue-3-plugin","Optional: Vue 3 plugin",[17,123,124,125,128,129,132],{},"For app-wide defaults (",[31,126,127],{},"validateOn",", ",[31,130,131],{},"debounceMs",", etc.) or explicit control over plugin registration on bare Vue 3, install the plugin in your app entry:",[48,134,136],{"className":50,"code":135,"language":52,"meta":53,"style":53},"import { createApp } from 'vue'\nimport { createAttaform } from 'attaform'\nimport App from '.\u002FApp.vue'\n\ncreateApp(App)\n  .use(createAttaform({ defaults: { debounceMs: 100 } }))\n  .mount('#app')\n",[31,137,138,152,164,176,182,191,216],{"__ignoreMap":53},[57,139,140,143,146,149],{"class":59,"line":60},[57,141,142],{"class":70},"import",[57,144,145],{"class":81}," { createApp } ",[57,147,148],{"class":70},"from",[57,150,151],{"class":91}," 'vue'\n",[57,153,154,156,159,161],{"class":59,"line":67},[57,155,142],{"class":70},[57,157,158],{"class":81}," { createAttaform } ",[57,160,148],{"class":70},[57,162,163],{"class":91}," 'attaform'\n",[57,165,166,168,171,173],{"class":59,"line":85},[57,167,142],{"class":70},[57,169,170],{"class":81}," App ",[57,172,148],{"class":70},[57,174,175],{"class":91}," '.\u002FApp.vue'\n",[57,177,178],{"class":59,"line":98},[57,179,181],{"emptyLinePlaceholder":180},true,"\n",[57,183,185,188],{"class":59,"line":184},5,[57,186,187],{"class":77},"createApp",[57,189,190],{"class":81},"(App)\n",[57,192,194,197,200,203,206,209,213],{"class":59,"line":193},6,[57,195,196],{"class":81},"  .",[57,198,199],{"class":77},"use",[57,201,202],{"class":81},"(",[57,204,205],{"class":77},"createAttaform",[57,207,208],{"class":81},"({ defaults: { debounceMs: ",[57,210,212],{"class":211},"sj4cs","100",[57,214,215],{"class":81}," } }))\n",[57,217,219,221,224,226,229],{"class":59,"line":218},7,[57,220,196],{"class":81},[57,222,223],{"class":77},"mount",[57,225,202],{"class":81},[57,227,228],{"class":91},"'#app'",[57,230,231],{"class":81},")\n",[17,233,104,234,237,238,240],{},[31,235,236],{},"createAttaform({ defaults })"," for app-wide settings that every ",[31,239,33],{}," call inherits.",[40,242,244],{"id":243},"optional-vite-plugin","Optional: Vite plugin",[17,246,247,248,251],{},"If you're on bare Vue 3 + Vite (not Nuxt), add the plugin to ",[31,249,250],{},"vite.config.ts",":",[48,253,255],{"className":50,"code":254,"language":52,"meta":53,"style":53},"import { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport { attaform } from 'attaform\u002Fvite'\n\nexport default defineConfig({\n  plugins: [vue(), attaform()],\n})\n",[31,256,257,269,281,293,297,308,325],{"__ignoreMap":53},[57,258,259,261,264,266],{"class":59,"line":60},[57,260,142],{"class":70},[57,262,263],{"class":81}," { defineConfig } ",[57,265,148],{"class":70},[57,267,268],{"class":91}," 'vite'\n",[57,270,271,273,276,278],{"class":59,"line":67},[57,272,142],{"class":70},[57,274,275],{"class":81}," vue ",[57,277,148],{"class":70},[57,279,280],{"class":91}," '@vitejs\u002Fplugin-vue'\n",[57,282,283,285,288,290],{"class":59,"line":85},[57,284,142],{"class":70},[57,286,287],{"class":81}," { attaform } ",[57,289,148],{"class":70},[57,291,292],{"class":91}," 'attaform\u002Fvite'\n",[57,294,295],{"class":59,"line":98},[57,296,181],{"emptyLinePlaceholder":180},[57,298,299,301,303,306],{"class":59,"line":184},[57,300,71],{"class":70},[57,302,74],{"class":70},[57,304,305],{"class":77}," defineConfig",[57,307,82],{"class":81},[57,309,310,313,316,319,322],{"class":59,"line":193},[57,311,312],{"class":81},"  plugins: [",[57,314,315],{"class":77},"vue",[57,317,318],{"class":81},"(), ",[57,320,321],{"class":77},"attaform",[57,323,324],{"class":81},"()],\n",[57,326,327],{"class":59,"line":218},[57,328,101],{"class":81},[17,330,331,332,334],{},"What this gets you: SSR-rendered ",[31,333,37],{}," bindings that match the client-rendered output on initial HTML (no flicker between server paint and hydration), and a leaner production bundle (one Zod adapter shipped instead of both).",[40,336,338],{"id":337},"where-to-next","Where to next",[340,341,342,351],"ul",{},[343,344,345,350],"li",{},[346,347,349],"a",{"href":348},"\u002Fdocs\u002Fgetting-started\u002Fquick-start","Quick start",": your first form, end-to-end.",[343,352,353,357],{},[346,354,356],{"href":355},"\u002Fdocs\u002Fgetting-started\u002Fyour-first-schema","Your first schema",": what Attaform reads from a Zod definition.",[359,360,361],"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 .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 .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":53,"searchDepth":67,"depth":67,"links":363},[364,365,366,367],{"id":42,"depth":67,"text":43},{"id":120,"depth":67,"text":121},{"id":243,"depth":67,"text":244},{"id":337,"depth":67,"text":338},"Install Attaform with one command. Optional setup sections cover the Nuxt module, the Vue 3 plugin, and the Vite plugin.","md",{},null,"\u002Fdocs\u002Fgetting-started\u002Finstallation",{"title":5,"description":368},"docs\u002Fgetting-started\u002Finstallation","D9X-qdhXoqQw9PEbZfWPVh_9P4JRVVsdLvvgNcVRntM",1780949757281]