[{"data":1,"prerenderedAt":1160},["ShallowReactive",2],{"content-\u002Fdocs\u002Fserver-and-ssr\u002Fssr-bare-vue":3},{"id":4,"title":5,"body":6,"description":1140,"extension":1141,"meta":1142,"metaRows":1143,"navigation":127,"path":1155,"seo":1156,"source":1157,"stem":1158,"__hash__":1159},"docs\u002Fdocs\u002Fserver-and-ssr\u002Fssr-bare-vue.md","SSR hydration: bare Vue",{"type":7,"value":8,"toc":1122},"minimark",[9,13,29,32,45,54,307,311,314,406,409,632,639,787,794,801,813,843,853,857,864,905,908,916,920,931,1015,1021,1025,1030,1062,1066,1076,1084,1090,1094,1118],[10,11,5],"h1",{"id":12},"ssr-hydration-bare-vue",[14,15,16],"blockquote",{},[17,18,19,20,24,25,28],"p",{},"Two helper functions bridge the server → client boundary for ",[21,22,23],"code",{},"@vue\u002Fserver-renderer"," projects. Render the state on the server, escape it for an inline ",[21,26,27],{},"\u003Cscript>",", replay it before mount on the client.",[30,31],"docs-meta-table",{},[17,33,34,35,44],{},"This page is code-only; bare-Vue SSR runs on a Node server you provide. The end-to-end test at ",[36,37,41],"a",{"href":38,"rel":39},"https:\u002F\u002Fgithub.com\u002Fattaform\u002FAttaform\u002Fblob\u002Fmain\u002Ftest\u002Fssr-bare-vue\u002Fround-trip.test.ts",[40],"nofollow",[21,42,43],{},"test\u002Fssr-bare-vue\u002Fround-trip.test.ts"," exercises exactly the pattern below and is the fastest way to read it working.",[46,47,49,50,53],"h2",{"id":48},"server-entry-serverts","Server (",[21,51,52],{},"entry-server.ts",")",[55,56,61],"pre",{"className":57,"code":58,"language":59,"meta":60,"style":60},"language-ts shiki shiki-themes github-light github-dark","import { createSSRApp } from 'vue'\nimport { renderToString } from '@vue\u002Fserver-renderer'\nimport { createAttaform, escapeForInlineScript, renderAttaformState } from 'attaform'\nimport App from '.\u002FApp.vue'\n\nexport async function render(url: string) {\n  const app = createSSRApp(App)\n  app.use(createAttaform())\n\n  const html = await renderToString(app)\n\n  const attaformState = renderAttaformState(app)\n  \u002F\u002F escapeForInlineScript keeps \u003C\u002Fscript> and U+2028 \u002F U+2029\n  \u002F\u002F separators out of the inline payload so it can't break out of\n  \u002F\u002F the \u003Cscript> tag.\n  const payload = escapeForInlineScript(JSON.stringify(attaformState))\n\n  return { html, payload }\n}\n","ts","",[21,62,63,83,96,109,122,129,162,180,197,202,221,226,241,248,254,260,287,292,301],{"__ignoreMap":60},[64,65,68,72,76,79],"span",{"class":66,"line":67},"line",1,[64,69,71],{"class":70},"szBVR","import",[64,73,75],{"class":74},"sVt8B"," { createSSRApp } ",[64,77,78],{"class":70},"from",[64,80,82],{"class":81},"sZZnC"," 'vue'\n",[64,84,86,88,91,93],{"class":66,"line":85},2,[64,87,71],{"class":70},[64,89,90],{"class":74}," { renderToString } ",[64,92,78],{"class":70},[64,94,95],{"class":81}," '@vue\u002Fserver-renderer'\n",[64,97,99,101,104,106],{"class":66,"line":98},3,[64,100,71],{"class":70},[64,102,103],{"class":74}," { createAttaform, escapeForInlineScript, renderAttaformState } ",[64,105,78],{"class":70},[64,107,108],{"class":81}," 'attaform'\n",[64,110,112,114,117,119],{"class":66,"line":111},4,[64,113,71],{"class":70},[64,115,116],{"class":74}," App ",[64,118,78],{"class":70},[64,120,121],{"class":81}," '.\u002FApp.vue'\n",[64,123,125],{"class":66,"line":124},5,[64,126,128],{"emptyLinePlaceholder":127},true,"\n",[64,130,132,135,138,141,145,148,152,155,159],{"class":66,"line":131},6,[64,133,134],{"class":70},"export",[64,136,137],{"class":70}," async",[64,139,140],{"class":70}," function",[64,142,144],{"class":143},"sScJk"," render",[64,146,147],{"class":74},"(",[64,149,151],{"class":150},"s4XuR","url",[64,153,154],{"class":70},":",[64,156,158],{"class":157},"sj4cs"," string",[64,160,161],{"class":74},") {\n",[64,163,165,168,171,174,177],{"class":66,"line":164},7,[64,166,167],{"class":70},"  const",[64,169,170],{"class":157}," app",[64,172,173],{"class":70}," =",[64,175,176],{"class":143}," createSSRApp",[64,178,179],{"class":74},"(App)\n",[64,181,183,186,189,191,194],{"class":66,"line":182},8,[64,184,185],{"class":74},"  app.",[64,187,188],{"class":143},"use",[64,190,147],{"class":74},[64,192,193],{"class":143},"createAttaform",[64,195,196],{"class":74},"())\n",[64,198,200],{"class":66,"line":199},9,[64,201,128],{"emptyLinePlaceholder":127},[64,203,205,207,210,212,215,218],{"class":66,"line":204},10,[64,206,167],{"class":70},[64,208,209],{"class":157}," html",[64,211,173],{"class":70},[64,213,214],{"class":70}," await",[64,216,217],{"class":143}," renderToString",[64,219,220],{"class":74},"(app)\n",[64,222,224],{"class":66,"line":223},11,[64,225,128],{"emptyLinePlaceholder":127},[64,227,229,231,234,236,239],{"class":66,"line":228},12,[64,230,167],{"class":70},[64,232,233],{"class":157}," attaformState",[64,235,173],{"class":70},[64,237,238],{"class":143}," renderAttaformState",[64,240,220],{"class":74},[64,242,244],{"class":66,"line":243},13,[64,245,247],{"class":246},"sJ8bj","  \u002F\u002F escapeForInlineScript keeps \u003C\u002Fscript> and U+2028 \u002F U+2029\n",[64,249,251],{"class":66,"line":250},14,[64,252,253],{"class":246},"  \u002F\u002F separators out of the inline payload so it can't break out of\n",[64,255,257],{"class":66,"line":256},15,[64,258,259],{"class":246},"  \u002F\u002F the \u003Cscript> tag.\n",[64,261,263,265,268,270,273,275,278,281,284],{"class":66,"line":262},16,[64,264,167],{"class":70},[64,266,267],{"class":157}," payload",[64,269,173],{"class":70},[64,271,272],{"class":143}," escapeForInlineScript",[64,274,147],{"class":74},[64,276,277],{"class":157},"JSON",[64,279,280],{"class":74},".",[64,282,283],{"class":143},"stringify",[64,285,286],{"class":74},"(attaformState))\n",[64,288,290],{"class":66,"line":289},17,[64,291,128],{"emptyLinePlaceholder":127},[64,293,295,298],{"class":66,"line":294},18,[64,296,297],{"class":70},"  return",[64,299,300],{"class":74}," { html, payload }\n",[64,302,304],{"class":66,"line":303},19,[64,305,306],{"class":74},"}\n",[46,308,310],{"id":309},"server-template-injection","Server template + injection",[17,312,313],{},"The HTML shipped to the browser carries two placeholders: one for the rendered app HTML, one for the inline payload:",[55,315,319],{"className":316,"code":317,"language":318,"meta":60,"style":60},"language-html shiki shiki-themes github-light github-dark","\u003Cbody>\n  \u003Cdiv id=\"app\">\u003C!--app-html-->\u003C\u002Fdiv>\n  \u003C!--app-payload-->\n  \u003Cscript type=\"module\" src=\"\u002Fsrc\u002Fentry-client.ts\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n","html",[21,320,321,333,363,368,398],{"__ignoreMap":60},[64,322,323,326,330],{"class":66,"line":67},[64,324,325],{"class":74},"\u003C",[64,327,329],{"class":328},"s9eBZ","body",[64,331,332],{"class":74},">\n",[64,334,335,338,341,344,347,350,353,356,359,361],{"class":66,"line":85},[64,336,337],{"class":74},"  \u003C",[64,339,340],{"class":328},"div",[64,342,343],{"class":143}," id",[64,345,346],{"class":74},"=",[64,348,349],{"class":81},"\"app\"",[64,351,352],{"class":74},">",[64,354,355],{"class":246},"\u003C!--app-html-->",[64,357,358],{"class":74},"\u003C\u002F",[64,360,340],{"class":328},[64,362,332],{"class":74},[64,364,365],{"class":66,"line":98},[64,366,367],{"class":246},"  \u003C!--app-payload-->\n",[64,369,370,372,375,378,380,383,386,388,391,394,396],{"class":66,"line":111},[64,371,337],{"class":74},[64,373,374],{"class":328},"script",[64,376,377],{"class":143}," type",[64,379,346],{"class":74},[64,381,382],{"class":81},"\"module\"",[64,384,385],{"class":143}," src",[64,387,346],{"class":74},[64,389,390],{"class":81},"\"\u002Fsrc\u002Fentry-client.ts\"",[64,392,393],{"class":74},">\u003C\u002F",[64,395,374],{"class":328},[64,397,332],{"class":74},[64,399,400,402,404],{"class":66,"line":124},[64,401,358],{"class":74},[64,403,329],{"class":328},[64,405,332],{"class":74},[17,407,408],{},"The request handler swaps both in:",[55,410,412],{"className":57,"code":411,"language":59,"meta":60,"style":60},"import fs from 'node:fs\u002Fpromises'\nimport { render } from '.\u002Fentry-server'\n\napp.use('*', async (req, res) => {\n  const template = await fs.readFile('index.html', 'utf-8')\n  const { html, payload } = await render(req.originalUrl)\n  const final = template\n    .replace('\u003C!--app-html-->', html)\n    .replace('\u003C!--app-payload-->', `\u003Cscript>window.__ATTAFORM_STATE__ = ${payload};\u003C\u002Fscript>`)\n  res.status(200).set({ 'Content-Type': 'text\u002Fhtml' }).end(final)\n})\n",[21,413,414,426,438,442,480,510,536,548,564,587,627],{"__ignoreMap":60},[64,415,416,418,421,423],{"class":66,"line":67},[64,417,71],{"class":70},[64,419,420],{"class":74}," fs ",[64,422,78],{"class":70},[64,424,425],{"class":81}," 'node:fs\u002Fpromises'\n",[64,427,428,430,433,435],{"class":66,"line":85},[64,429,71],{"class":70},[64,431,432],{"class":74}," { render } ",[64,434,78],{"class":70},[64,436,437],{"class":81}," '.\u002Fentry-server'\n",[64,439,440],{"class":66,"line":98},[64,441,128],{"emptyLinePlaceholder":127},[64,443,444,447,449,451,454,457,460,463,466,468,471,474,477],{"class":66,"line":111},[64,445,446],{"class":74},"app.",[64,448,188],{"class":143},[64,450,147],{"class":74},[64,452,453],{"class":81},"'*'",[64,455,456],{"class":74},", ",[64,458,459],{"class":70},"async",[64,461,462],{"class":74}," (",[64,464,465],{"class":150},"req",[64,467,456],{"class":74},[64,469,470],{"class":150},"res",[64,472,473],{"class":74},") ",[64,475,476],{"class":70},"=>",[64,478,479],{"class":74}," {\n",[64,481,482,484,487,489,491,494,497,499,502,504,507],{"class":66,"line":124},[64,483,167],{"class":70},[64,485,486],{"class":157}," template",[64,488,173],{"class":70},[64,490,214],{"class":70},[64,492,493],{"class":74}," fs.",[64,495,496],{"class":143},"readFile",[64,498,147],{"class":74},[64,500,501],{"class":81},"'index.html'",[64,503,456],{"class":74},[64,505,506],{"class":81},"'utf-8'",[64,508,509],{"class":74},")\n",[64,511,512,514,517,519,521,524,527,529,531,533],{"class":66,"line":131},[64,513,167],{"class":70},[64,515,516],{"class":74}," { ",[64,518,318],{"class":157},[64,520,456],{"class":74},[64,522,523],{"class":157},"payload",[64,525,526],{"class":74}," } ",[64,528,346],{"class":70},[64,530,214],{"class":70},[64,532,144],{"class":143},[64,534,535],{"class":74},"(req.originalUrl)\n",[64,537,538,540,543,545],{"class":66,"line":164},[64,539,167],{"class":70},[64,541,542],{"class":157}," final",[64,544,173],{"class":70},[64,546,547],{"class":74}," template\n",[64,549,550,553,556,558,561],{"class":66,"line":182},[64,551,552],{"class":74},"    .",[64,554,555],{"class":143},"replace",[64,557,147],{"class":74},[64,559,560],{"class":81},"'\u003C!--app-html-->'",[64,562,563],{"class":74},", html)\n",[64,565,566,568,570,572,575,577,580,582,585],{"class":66,"line":199},[64,567,552],{"class":74},[64,569,555],{"class":143},[64,571,147],{"class":74},[64,573,574],{"class":81},"'\u003C!--app-payload-->'",[64,576,456],{"class":74},[64,578,579],{"class":81},"`\u003Cscript>window.__ATTAFORM_STATE__ = ${",[64,581,523],{"class":74},[64,583,584],{"class":81},"};\u003C\u002Fscript>`",[64,586,509],{"class":74},[64,588,589,592,595,597,600,603,606,609,612,615,618,621,624],{"class":66,"line":204},[64,590,591],{"class":74},"  res.",[64,593,594],{"class":143},"status",[64,596,147],{"class":74},[64,598,599],{"class":157},"200",[64,601,602],{"class":74},").",[64,604,605],{"class":143},"set",[64,607,608],{"class":74},"({ ",[64,610,611],{"class":81},"'Content-Type'",[64,613,614],{"class":74},": ",[64,616,617],{"class":81},"'text\u002Fhtml'",[64,619,620],{"class":74}," }).",[64,622,623],{"class":143},"end",[64,625,626],{"class":74},"(final)\n",[64,628,629],{"class":66,"line":223},[64,630,631],{"class":74},"})\n",[46,633,635,636,53],{"id":634},"client-entry-clientts","Client (",[21,637,638],{},"entry-client.ts",[55,640,642],{"className":57,"code":641,"language":59,"meta":60,"style":60},"import { createSSRApp } from 'vue'\nimport { createAttaform, hydrateAttaformState } from 'attaform'\nimport App from '.\u002FApp.vue'\n\nconst app = createSSRApp(App)\napp.use(createAttaform())\n\n\u002F\u002F Replay the server's form state BEFORE mounting; forms read from\n\u002F\u002F the hydration bag during setup.\nconst serialized = (window as { __ATTAFORM_STATE__?: unknown }).__ATTAFORM_STATE__\nif (serialized !== undefined) hydrateAttaformState(app, serialized)\n\napp.mount('#app')\n",[21,643,644,654,665,675,679,692,704,708,713,718,747,769,773],{"__ignoreMap":60},[64,645,646,648,650,652],{"class":66,"line":67},[64,647,71],{"class":70},[64,649,75],{"class":74},[64,651,78],{"class":70},[64,653,82],{"class":81},[64,655,656,658,661,663],{"class":66,"line":85},[64,657,71],{"class":70},[64,659,660],{"class":74}," { createAttaform, hydrateAttaformState } ",[64,662,78],{"class":70},[64,664,108],{"class":81},[64,666,667,669,671,673],{"class":66,"line":98},[64,668,71],{"class":70},[64,670,116],{"class":74},[64,672,78],{"class":70},[64,674,121],{"class":81},[64,676,677],{"class":66,"line":111},[64,678,128],{"emptyLinePlaceholder":127},[64,680,681,684,686,688,690],{"class":66,"line":124},[64,682,683],{"class":70},"const",[64,685,170],{"class":157},[64,687,173],{"class":70},[64,689,176],{"class":143},[64,691,179],{"class":74},[64,693,694,696,698,700,702],{"class":66,"line":131},[64,695,446],{"class":74},[64,697,188],{"class":143},[64,699,147],{"class":74},[64,701,193],{"class":143},[64,703,196],{"class":74},[64,705,706],{"class":66,"line":164},[64,707,128],{"emptyLinePlaceholder":127},[64,709,710],{"class":66,"line":182},[64,711,712],{"class":246},"\u002F\u002F Replay the server's form state BEFORE mounting; forms read from\n",[64,714,715],{"class":66,"line":199},[64,716,717],{"class":246},"\u002F\u002F the hydration bag during setup.\n",[64,719,720,722,725,727,730,733,735,738,741,744],{"class":66,"line":204},[64,721,683],{"class":70},[64,723,724],{"class":157}," serialized",[64,726,173],{"class":70},[64,728,729],{"class":74}," (window ",[64,731,732],{"class":70},"as",[64,734,516],{"class":74},[64,736,737],{"class":150},"__ATTAFORM_STATE__",[64,739,740],{"class":70},"?:",[64,742,743],{"class":157}," unknown",[64,745,746],{"class":74}," }).__ATTAFORM_STATE__\n",[64,748,749,752,755,758,761,763,766],{"class":66,"line":223},[64,750,751],{"class":70},"if",[64,753,754],{"class":74}," (serialized ",[64,756,757],{"class":70},"!==",[64,759,760],{"class":157}," undefined",[64,762,473],{"class":74},[64,764,765],{"class":143},"hydrateAttaformState",[64,767,768],{"class":74},"(app, serialized)\n",[64,770,771],{"class":66,"line":228},[64,772,128],{"emptyLinePlaceholder":127},[64,774,775,777,780,782,785],{"class":66,"line":243},[64,776,446],{"class":74},[64,778,779],{"class":143},"mount",[64,781,147],{"class":74},[64,783,784],{"class":81},"'#app'",[64,786,509],{"class":74},[17,788,789,790,793],{},"That's it. Every ",[21,791,792],{},"useForm"," call on the client resolves to the same values the server rendered.",[46,795,797,798],{"id":796},"why-escapeforinlinescript","Why ",[21,799,800],{},"escapeForInlineScript",[17,802,803,804,806,807,810,811,154],{},"Embedding JSON in an inline ",[21,805,27],{}," looks safe, until the JSON contains a literal ",[21,808,809],{},"\u003C\u002Fscript>"," or a U+2028 \u002F U+2029 line separator that breaks JavaScript string parsing. ",[21,812,800],{},[814,815,816,826,836],"ul",{},[817,818,819,820,822,823,280],"li",{},"Replaces ",[21,821,809],{}," with ",[21,824,825],{},"\u003C\\\u002Fscript>",[817,827,828,829,832,833,280],{},"Escapes U+2028 \u002F U+2029 as ",[21,830,831],{},"\u2028"," \u002F ",[21,834,835],{},"\u2029",[817,837,838,839,842],{},"Leaves the JSON valid for ",[21,840,841],{},"JSON.parse"," on the client.",[17,844,845,846,849,850,852],{},"Skip it and a ",[21,847,848],{},"notes"," field containing ",[21,851,809],{}," would close the inline tag mid-payload, breaking the page. Defense in depth: the escape runs unconditionally, even when the data \"couldn't\" contain those bytes.",[46,854,856],{"id":855},"what-crosses-the-wire","What crosses the wire",[17,858,859,860,154],{},"Same surfaces as the ",[36,861,863],{"href":862},"\u002Fdocs\u002Fserver-and-ssr\u002Fssr-nuxt","Nuxt path",[814,865,866,872,878,899],{},[817,867,868,871],{},[21,869,870],{},"form.values",": whole tree, including nested objects and arrays.",[817,873,874,877],{},[21,875,876],{},"errors",": every entry in the error map, keyed by path.",[817,879,880,614,883,832,886,832,889,832,892,832,895,898],{},[21,881,882],{},"fields",[21,884,885],{},"touched",[21,887,888],{},"focused",[21,890,891],{},"blurred",[21,893,894],{},"connected",[21,896,897],{},"updatedAt"," per path.",[817,900,901,904],{},[21,902,903],{},"blankPaths",": numeric-blank state survives the boundary.",[17,906,907],{},"NOT on the wire:",[814,909,910,913],{},[817,911,912],{},"History chain (each session walks its own undo timeline).",[817,914,915],{},"Validation in-flight state (re-runs locally on hydrate).",[46,917,919],{"id":918},"vite-plugin","Vite plugin",[17,921,922,923,926,927,930],{},"For bare Vue + Vite, install ",[21,924,925],{},"attaform\u002Fvite"," to ensure ",[21,928,929],{},"v-register"," bindings compile correctly under SSR:",[55,932,934],{"className":57,"code":933,"language":59,"meta":60,"style":60},"\u002F\u002F vite.config.ts\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs\u002Fplugin-vue'\nimport attaform from 'attaform\u002Fvite'\n\nexport default defineConfig({\n  plugins: [vue(), attaform()],\n})\n",[21,935,936,941,953,965,977,981,994,1011],{"__ignoreMap":60},[64,937,938],{"class":66,"line":67},[64,939,940],{"class":246},"\u002F\u002F vite.config.ts\n",[64,942,943,945,948,950],{"class":66,"line":85},[64,944,71],{"class":70},[64,946,947],{"class":74}," { defineConfig } ",[64,949,78],{"class":70},[64,951,952],{"class":81}," 'vite'\n",[64,954,955,957,960,962],{"class":66,"line":98},[64,956,71],{"class":70},[64,958,959],{"class":74}," vue ",[64,961,78],{"class":70},[64,963,964],{"class":81}," '@vitejs\u002Fplugin-vue'\n",[64,966,967,969,972,974],{"class":66,"line":111},[64,968,71],{"class":70},[64,970,971],{"class":74}," attaform ",[64,973,78],{"class":70},[64,975,976],{"class":81}," 'attaform\u002Fvite'\n",[64,978,979],{"class":66,"line":124},[64,980,128],{"emptyLinePlaceholder":127},[64,982,983,985,988,991],{"class":66,"line":131},[64,984,134],{"class":70},[64,986,987],{"class":70}," default",[64,989,990],{"class":143}," defineConfig",[64,992,993],{"class":74},"({\n",[64,995,996,999,1002,1005,1008],{"class":66,"line":164},[64,997,998],{"class":74},"  plugins: [",[64,1000,1001],{"class":143},"vue",[64,1003,1004],{"class":74},"(), ",[64,1006,1007],{"class":143},"attaform",[64,1009,1010],{"class":74},"()],\n",[64,1012,1013],{"class":66,"line":182},[64,1014,631],{"class":74},[17,1016,1017,1018,1020],{},"The plugin rewrites ",[21,1019,929],{}," directives to a SSR-correct form so the directive's element-tracking machinery matches between server and client renders. Without it, the directive can emit hydration mismatches on first paint.",[46,1022,1024],{"id":1023},"common-issues","Common issues",[1026,1027,1029],"h3",{"id":1028},"the-form-is-empty-on-the-client-even-though-the-server-rendered-values","\"The form is empty on the client even though the server rendered values.\"",[814,1031,1032,1047],{},[817,1033,1034,1035,1038,1039,1042,1043,1046],{},"Did you call ",[21,1036,1037],{},"hydrateAttaformState(app, payload)"," before ",[21,1040,1041],{},"app.mount(...)","? It has to land before ",[21,1044,1045],{},"setup"," runs.",[817,1048,1049,1050,1053,1054,1057,1058,1061],{},"Does the form's ",[21,1051,1052],{},"key"," match between server and client? Hard-code it as a string literal. ",[21,1055,1056],{},"uuidv4()"," or ",[21,1059,1060],{},"Math.random()"," produces a fresh key per render and breaks the match.",[1026,1063,1065],{"id":1064},"field-errors-from-the-server-disappear-on-first-interaction","\"Field errors from the server disappear on first interaction.\"",[17,1067,1068,1069,1057,1072,1075],{},"By design. Any mutation re-runs validation. Gate the display on ",[21,1070,1071],{},"form.fields.\u003Cpath>.touched",[21,1073,1074],{},"form.meta.dirty"," to keep server-provided errors visible until the user touches the field.",[1026,1077,1079,1080,1083],{"id":1078},"hydration-mismatch-on-a-input-v-register-element","\"Hydration mismatch on a ",[21,1081,1082],{},"\u003Cinput v-register>"," element.\"",[17,1085,1086,1087,1089],{},"Install the ",[21,1088,925],{}," plugin (see above). The runtime renders consistent attributes on server and client, but the directive's element-tracking emits identity markers that the compiler needs help to align between SSR and hydration phases.",[46,1091,1093],{"id":1092},"where-to-next","Where to next",[814,1095,1096,1102,1109],{},[817,1097,1098,1101],{},[36,1099,1100],{"href":862},"SSR hydration: Nuxt",": the same round-trip with zero wiring.",[817,1103,1104,1108],{},[36,1105,1107],{"href":1106},"\u002Fdocs\u002Fserver-and-ssr\u002Fperformance","Performance",": what hydration costs at scale.",[817,1110,1111,1117],{},[36,1112,1114],{"href":1113},"\u002Fdocs\u002Fserver-and-ssr\u002Fparse-api-errors",[21,1115,1116],{},"parseApiErrors",": turn server 4xx responses into reactive form errors.",[1119,1120,1121],"style",{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}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 .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}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 .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":60,"searchDepth":85,"depth":85,"links":1123},[1124,1126,1127,1129,1131,1132,1133,1139],{"id":48,"depth":85,"text":1125},"Server (entry-server.ts)",{"id":309,"depth":85,"text":310},{"id":634,"depth":85,"text":1128},"Client (entry-client.ts)",{"id":796,"depth":85,"text":1130},"Why escapeForInlineScript",{"id":855,"depth":85,"text":856},{"id":918,"depth":85,"text":919},{"id":1023,"depth":85,"text":1024,"children":1134},[1135,1136,1137],{"id":1028,"depth":98,"text":1029},{"id":1064,"depth":98,"text":1065},{"id":1078,"depth":98,"text":1138},"\"Hydration mismatch on a \u003Cinput v-register> element.\"",{"id":1092,"depth":85,"text":1093},"Wire renderAttaformState \u002F hydrateAttaformState into your @vue\u002Fserver-renderer pipeline. Two functions, one inline payload tag, no Nuxt required.","md",{},[1144,1147,1150,1152],{"label":1145,"value":1146},"Category","Integration",{"label":1148,"value":1149,"kind":21},"Render","renderAttaformState(app)",{"label":1151,"value":1037,"kind":21},"Hydrate",{"label":1153,"value":1154,"kind":21},"Inline escape","escapeForInlineScript(payload)","\u002Fdocs\u002Fserver-and-ssr\u002Fssr-bare-vue",{"title":5,"description":1140},null,"docs\u002Fserver-and-ssr\u002Fssr-bare-vue","llbtIo5bA9Y2XdIYPEoAF0I0Q30XmHaDnXszicibOaI",1780949762097]