[{"data":1,"prerenderedAt":4193},["ShallowReactive",2],{"blog-vueform":3},{"id":4,"title":5,"author":6,"authorSlug":7,"body":8,"date":4179,"description":4180,"extension":4181,"faq":7,"featured":4182,"image":4183,"meta":4184,"navigation":285,"path":4185,"readTime":7,"seo":4186,"stem":4187,"tags":4188,"__hash__":4192},"blog\u002Fblog\u002Fvueform.md","Vueform + Vuestic UI: Full Integration for Scalable Vue Forms","Epicmax Team",null,{"type":9,"value":10,"toc":4162},"minimark",[11,15,20,23,46,50,58,457,466,493,504,508,515,680,684,792,798,802,813,1193,1209,1213,1216,1540,1550,1554,1560,1627,1630,1634,1659,1773,1779,1845,1849,1852,2283,2287,2398,2402,2408,3079,3083,3300,3310,3457,3461,3655,3699,3703,3708,3745,3750,3920,3925,4117,4123,4127,4130,4150,4153,4158],[12,13,14],"p",{},"Vueform is a powerful form framework for Vue, and Vuestic UI is a full-featured component library. This guide walks through building a custom wrapper around Vuestic UI components for use inside Vueform, covering everything you need for full compatibility.",[16,17,19],"h2",{"id":18},"integration-methods","Integration methods",[12,21,22],{},"Vueform offers several integration strategies:",[24,25,26,34,40],"ul",{},[27,28,29,33],"li",{},[30,31,32],"strong",{},"Generic Elements"," — maximum flexibility, full control over props, slots, and events. In this article, we will consider this approach.",[27,35,36,39],{},[30,37,38],{},"Plugins"," — more suitable for extending existing functionality, adding new props and features.",[27,41,42,45],{},[30,43,44],{},"Alternative Views"," — easier if you don't want to develop a new element.",[16,47,49],{"id":48},"step-1-create-a-custom-wrapper-for-a-vuestic-ui-component","Step 1: Create a custom wrapper for a Vuestic UI component",[12,51,52,53,57],{},"Let's create our first wrapper. For this, we will use ",[54,55,56],"code",{},"VaInput"," from Vuestic UI:",[59,60,65],"pre",{"className":61,"code":62,"language":63,"meta":64,"style":64},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Ctemplate>\n  \u003CElementLayout>\n    \u003Ctemplate #element>\n      \u003CVaInput \u002F>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate v-for=\"(component, slot) in elementSlots\" #[slot]>\n      \u003Cslot :name=\"slot\" :el$=\"el$\">\n        \u003Ccomponent :is=\"component\" :el$=\"el$\" \u002F>\n      \u003C\u002Fslot>\n    \u003C\u002Ftemplate>\n  \u003C\u002FElementLayout>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nimport { defineElement } from '@vueform\u002Fvueform'\nimport { VaInput } from 'vuestic-ui'\n\nexport default defineElement({\n  name: 'VaInputElement',\n  components: [VaInput],\n  setup(props, { element }) {\n    \u002F\u002F Initial setup\n  },\n})\n\u003C\u002Fscript>\n","vue","",[54,66,67,83,94,111,122,132,176,209,241,251,260,270,280,287,297,324,345,350,368,388,401,426,433,439,448],{"__ignoreMap":64},[68,69,72,76,80],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sMK4o","\u003C",[68,77,79],{"class":78},"swJcz","template",[68,81,82],{"class":74},">\n",[68,84,86,89,92],{"class":70,"line":85},2,[68,87,88],{"class":74},"  \u003C",[68,90,91],{"class":78},"ElementLayout",[68,93,82],{"class":74},[68,95,97,100,102,105,109],{"class":70,"line":96},3,[68,98,99],{"class":74},"    \u003C",[68,101,79],{"class":78},[68,103,104],{"class":74}," #",[68,106,108],{"class":107},"spNyl","element",[68,110,82],{"class":74},[68,112,114,117,119],{"class":70,"line":113},4,[68,115,116],{"class":74},"      \u003C",[68,118,56],{"class":78},[68,120,121],{"class":74}," \u002F>\n",[68,123,125,128,130],{"class":70,"line":124},5,[68,126,127],{"class":74},"    \u003C\u002F",[68,129,79],{"class":78},[68,131,82],{"class":74},[68,133,135,137,139,143,146,149,153,156,159,162,165,167,170,173],{"class":70,"line":134},6,[68,136,99],{"class":74},[68,138,79],{"class":78},[68,140,142],{"class":141},"s7zQu"," v-for",[68,144,145],{"class":74},"=",[68,147,148],{"class":74},"\"",[68,150,152],{"class":151},"sTEyZ","(component",[68,154,155],{"class":74},",",[68,157,158],{"class":151}," slot) ",[68,160,161],{"class":74},"in",[68,163,164],{"class":151}," elementSlots",[68,166,148],{"class":74},[68,168,169],{"class":74}," #[",[68,171,172],{"class":151},"slot",[68,174,175],{"class":74},"]>\n",[68,177,179,181,183,186,188,190,193,195,198,200,202,205,207],{"class":70,"line":178},7,[68,180,116],{"class":74},[68,182,172],{"class":78},[68,184,185],{"class":107}," :name",[68,187,145],{"class":74},[68,189,148],{"class":74},[68,191,172],{"class":192},"sfazB",[68,194,148],{"class":74},[68,196,197],{"class":107}," :el$",[68,199,145],{"class":74},[68,201,148],{"class":74},[68,203,204],{"class":192},"el$",[68,206,148],{"class":74},[68,208,82],{"class":74},[68,210,212,215,218,221,223,225,227,229,231,233,235,237,239],{"class":70,"line":211},8,[68,213,214],{"class":74},"        \u003C",[68,216,217],{"class":78},"component",[68,219,220],{"class":107}," :is",[68,222,145],{"class":74},[68,224,148],{"class":74},[68,226,217],{"class":192},[68,228,148],{"class":74},[68,230,197],{"class":107},[68,232,145],{"class":74},[68,234,148],{"class":74},[68,236,204],{"class":192},[68,238,148],{"class":74},[68,240,121],{"class":74},[68,242,244,247,249],{"class":70,"line":243},9,[68,245,246],{"class":74},"      \u003C\u002F",[68,248,172],{"class":78},[68,250,82],{"class":74},[68,252,254,256,258],{"class":70,"line":253},10,[68,255,127],{"class":74},[68,257,79],{"class":78},[68,259,82],{"class":74},[68,261,263,266,268],{"class":70,"line":262},11,[68,264,265],{"class":74},"  \u003C\u002F",[68,267,91],{"class":78},[68,269,82],{"class":74},[68,271,273,276,278],{"class":70,"line":272},12,[68,274,275],{"class":74},"\u003C\u002F",[68,277,79],{"class":78},[68,279,82],{"class":74},[68,281,283],{"class":70,"line":282},13,[68,284,286],{"emptyLinePlaceholder":285},true,"\n",[68,288,290,292,295],{"class":70,"line":289},14,[68,291,75],{"class":74},[68,293,294],{"class":78},"script",[68,296,82],{"class":74},[68,298,300,303,306,309,312,315,318,321],{"class":70,"line":299},15,[68,301,302],{"class":141},"import",[68,304,305],{"class":74}," {",[68,307,308],{"class":151}," defineElement",[68,310,311],{"class":74}," }",[68,313,314],{"class":141}," from",[68,316,317],{"class":74}," '",[68,319,320],{"class":192},"@vueform\u002Fvueform",[68,322,323],{"class":74},"'\n",[68,325,327,329,331,334,336,338,340,343],{"class":70,"line":326},16,[68,328,302],{"class":141},[68,330,305],{"class":74},[68,332,333],{"class":151}," VaInput",[68,335,311],{"class":74},[68,337,314],{"class":141},[68,339,317],{"class":74},[68,341,342],{"class":192},"vuestic-ui",[68,344,323],{"class":74},[68,346,348],{"class":70,"line":347},17,[68,349,286],{"emptyLinePlaceholder":285},[68,351,353,356,359,362,365],{"class":70,"line":352},18,[68,354,355],{"class":141},"export",[68,357,358],{"class":141}," default",[68,360,308],{"class":361},"s2Zo4",[68,363,364],{"class":151},"(",[68,366,367],{"class":74},"{\n",[68,369,371,374,377,379,382,385],{"class":70,"line":370},19,[68,372,373],{"class":78},"  name",[68,375,376],{"class":74},":",[68,378,317],{"class":74},[68,380,381],{"class":192},"VaInputElement",[68,383,384],{"class":74},"'",[68,386,387],{"class":74},",\n",[68,389,391,394,396,399],{"class":70,"line":390},20,[68,392,393],{"class":78},"  components",[68,395,376],{"class":74},[68,397,398],{"class":151}," [VaInput]",[68,400,387],{"class":74},[68,402,404,407,409,413,415,417,420,423],{"class":70,"line":403},21,[68,405,406],{"class":78},"  setup",[68,408,364],{"class":74},[68,410,412],{"class":411},"sHdIc","props",[68,414,155],{"class":74},[68,416,305],{"class":74},[68,418,419],{"class":411}," element",[68,421,422],{"class":74}," })",[68,424,425],{"class":74}," {\n",[68,427,429],{"class":70,"line":428},22,[68,430,432],{"class":431},"sHwdD","    \u002F\u002F Initial setup\n",[68,434,436],{"class":70,"line":435},23,[68,437,438],{"class":74},"  },\n",[68,440,442,445],{"class":70,"line":441},24,[68,443,444],{"class":74},"}",[68,446,447],{"class":151},")\n",[68,449,451,453,455],{"class":70,"line":450},25,[68,452,275],{"class":74},[68,454,294],{"class":78},[68,456,82],{"class":74},[12,458,459,462,463,465],{},[54,460,461],{},"defineElement"," is imported directly from ",[54,464,320],{},". This is our main helper function for creating a custom component.",[12,467,468,469,472,473,476,477,476,480,476,483,476,486,476,489,492],{},"The ",[54,470,471],{},"v-for"," block passes generic slots from Vueform (",[54,474,475],{},"label",", ",[54,478,479],{},"info",[54,481,482],{},"description",[54,484,485],{},"before",[54,487,488],{},"between",[54,490,491],{},"after","). There aren't many of them, but they can conflict with slots from Vuestic UI, so they can be removed.",[12,494,495,496,499,500,503],{},"The name ",[54,497,498],{},"'VaInputElement'"," is special — every name should end with ",[54,501,502],{},"'Element'",". This allows Vueform to render the form through the schema (we'll touch on this later).",[16,505,507],{"id":506},"step-2-register-your-component","Step 2: Register your component",[12,509,510,511,514],{},"Create ",[54,512,513],{},"vueform.config.ts"," in the root of the project and import your wrapper:",[59,516,520],{"className":517,"code":518,"language":519,"meta":64,"style":64},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import en from '@vueform\u002Fvueform\u002Flocales\u002Fen'\nimport vueform from '@vueform\u002Fvueform\u002Fdist\u002Fvueform'\nimport { defineConfig } from '@vueform\u002Fvueform'\nimport '@vueform\u002Fvueform\u002Fdist\u002Fvueform.css';\nimport VaInputElement from '.\u002Fsrc\u002FVaInputElement.vue';\n\nexport default defineConfig({\n  theme: vueform,\n  locales: { en },\n  locale: 'en',\n  elements: [VaInputElement]\n})\n","ts",[54,521,522,539,555,574,588,606,610,622,634,648,664,674],{"__ignoreMap":64},[68,523,524,526,529,532,534,537],{"class":70,"line":71},[68,525,302],{"class":141},[68,527,528],{"class":151}," en ",[68,530,531],{"class":141},"from",[68,533,317],{"class":74},[68,535,536],{"class":192},"@vueform\u002Fvueform\u002Flocales\u002Fen",[68,538,323],{"class":74},[68,540,541,543,546,548,550,553],{"class":70,"line":85},[68,542,302],{"class":141},[68,544,545],{"class":151}," vueform ",[68,547,531],{"class":141},[68,549,317],{"class":74},[68,551,552],{"class":192},"@vueform\u002Fvueform\u002Fdist\u002Fvueform",[68,554,323],{"class":74},[68,556,557,559,561,564,566,568,570,572],{"class":70,"line":96},[68,558,302],{"class":141},[68,560,305],{"class":74},[68,562,563],{"class":151}," defineConfig",[68,565,311],{"class":74},[68,567,314],{"class":141},[68,569,317],{"class":74},[68,571,320],{"class":192},[68,573,323],{"class":74},[68,575,576,578,580,583,585],{"class":70,"line":113},[68,577,302],{"class":141},[68,579,317],{"class":74},[68,581,582],{"class":192},"@vueform\u002Fvueform\u002Fdist\u002Fvueform.css",[68,584,384],{"class":74},[68,586,587],{"class":74},";\n",[68,589,590,592,595,597,599,602,604],{"class":70,"line":124},[68,591,302],{"class":141},[68,593,594],{"class":151}," VaInputElement ",[68,596,531],{"class":141},[68,598,317],{"class":74},[68,600,601],{"class":192},".\u002Fsrc\u002FVaInputElement.vue",[68,603,384],{"class":74},[68,605,587],{"class":74},[68,607,608],{"class":70,"line":134},[68,609,286],{"emptyLinePlaceholder":285},[68,611,612,614,616,618,620],{"class":70,"line":178},[68,613,355],{"class":141},[68,615,358],{"class":141},[68,617,563],{"class":361},[68,619,364],{"class":151},[68,621,367],{"class":74},[68,623,624,627,629,632],{"class":70,"line":211},[68,625,626],{"class":78},"  theme",[68,628,376],{"class":74},[68,630,631],{"class":151}," vueform",[68,633,387],{"class":74},[68,635,636,639,641,643,645],{"class":70,"line":243},[68,637,638],{"class":78},"  locales",[68,640,376],{"class":74},[68,642,305],{"class":74},[68,644,528],{"class":151},[68,646,647],{"class":74},"},\n",[68,649,650,653,655,657,660,662],{"class":70,"line":253},[68,651,652],{"class":78},"  locale",[68,654,376],{"class":74},[68,656,317],{"class":74},[68,658,659],{"class":192},"en",[68,661,384],{"class":74},[68,663,387],{"class":74},[68,665,666,669,671],{"class":70,"line":262},[68,667,668],{"class":78},"  elements",[68,670,376],{"class":74},[68,672,673],{"class":151}," [VaInputElement]\n",[68,675,676,678],{"class":70,"line":272},[68,677,444],{"class":74},[68,679,447],{"class":151},[16,681,683],{"id":682},"step-3-use-the-custom-element","Step 3: Use the custom element",[59,685,687],{"className":61,"code":686,"language":63,"meta":64,"style":64},"\u003Ctemplate>\n  \u003CVueform>\n    \u003CVaInputElement name=\"MyCustomInput\"\u002F>\n  \u003C\u002FVueform>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup lang=\"ts\">\nimport VaInputElement from '.\u002FVaInputElement.vue'\n\u003C\u002Fscript>\n",[54,688,689,697,706,727,735,743,747,769,784],{"__ignoreMap":64},[68,690,691,693,695],{"class":70,"line":71},[68,692,75],{"class":74},[68,694,79],{"class":78},[68,696,82],{"class":74},[68,698,699,701,704],{"class":70,"line":85},[68,700,88],{"class":74},[68,702,703],{"class":78},"Vueform",[68,705,82],{"class":74},[68,707,708,710,712,715,717,719,722,724],{"class":70,"line":96},[68,709,99],{"class":74},[68,711,381],{"class":78},[68,713,714],{"class":107}," name",[68,716,145],{"class":74},[68,718,148],{"class":74},[68,720,721],{"class":192},"MyCustomInput",[68,723,148],{"class":74},[68,725,726],{"class":74},"\u002F>\n",[68,728,729,731,733],{"class":70,"line":113},[68,730,265],{"class":74},[68,732,703],{"class":78},[68,734,82],{"class":74},[68,736,737,739,741],{"class":70,"line":124},[68,738,275],{"class":74},[68,740,79],{"class":78},[68,742,82],{"class":74},[68,744,745],{"class":70,"line":134},[68,746,286],{"emptyLinePlaceholder":285},[68,748,749,751,753,756,759,761,763,765,767],{"class":70,"line":178},[68,750,75],{"class":74},[68,752,294],{"class":78},[68,754,755],{"class":107}," setup",[68,757,758],{"class":107}," lang",[68,760,145],{"class":74},[68,762,148],{"class":74},[68,764,519],{"class":192},[68,766,148],{"class":74},[68,768,82],{"class":74},[68,770,771,773,775,777,779,782],{"class":70,"line":211},[68,772,302],{"class":141},[68,774,594],{"class":151},[68,776,531],{"class":141},[68,778,317],{"class":74},[68,780,781],{"class":192},".\u002FVaInputElement.vue",[68,783,323],{"class":74},[68,785,786,788,790],{"class":70,"line":243},[68,787,275],{"class":74},[68,789,294],{"class":78},[68,791,82],{"class":74},[12,793,468,794,797],{},[54,795,796],{},"name"," attribute is mandatory for each element. So far, we can't pass props, slots, or event listeners. Also, Vueform doesn't know anything about our component's model, so validation won't work. Let's fix that next.",[16,799,801],{"id":800},"step-4-add-v-model-and-an-input-handler","Step 4: Add v-model and an input handler",[12,803,804,805,808,809,812],{},"We need to bind the component to Vueform's model using ",[54,806,807],{},"model-value"," and update it with ",[54,810,811],{},"@update:model-value",". This gives us reactivity and enables validation:",[59,814,816],{"className":61,"code":815,"language":63,"meta":64,"style":64},"\u003Ctemplate>\n  \u003CElementLayout>\n    \u003Ctemplate #element>\n      \u003CVaInput :model-value=\"value\" @update:model-value=\"handleInput\" \u002F>\n    \u003C\u002Ftemplate>\n    \u003Ctemplate v-for=\"(component, slot) in elementSlots\" #[slot]>\n      \u003Cslot :name=\"slot\" :el$=\"el$\">\n        \u003Ccomponent :is=\"component\" :el$=\"el$\" \u002F>\n      \u003C\u002Fslot>\n    \u003C\u002Ftemplate>\n  \u003C\u002FElementLayout>\n\u003C\u002Ftemplate>\n\u003Cscript>\nimport { defineElement } from '@vueform\u002Fvueform'\nimport { VaInput } from 'vuestic-ui'\n\nexport default defineElement({\n  name: 'VaInputElement',\n  components: [VaInput],\n  setup(props, { element }) {\n    const { value, update } = element\n    const handleInput = (val) => update(val)\n    return { value, handleInput }\n  },\n})\n\u003C\u002Fscript>\n",[54,817,818,826,834,846,878,886,916,944,972,980,988,996,1004,1012,1030,1048,1052,1064,1078,1088,1106,1129,1158,1174,1178,1184],{"__ignoreMap":64},[68,819,820,822,824],{"class":70,"line":71},[68,821,75],{"class":74},[68,823,79],{"class":78},[68,825,82],{"class":74},[68,827,828,830,832],{"class":70,"line":85},[68,829,88],{"class":74},[68,831,91],{"class":78},[68,833,82],{"class":74},[68,835,836,838,840,842,844],{"class":70,"line":96},[68,837,99],{"class":74},[68,839,79],{"class":78},[68,841,104],{"class":74},[68,843,108],{"class":107},[68,845,82],{"class":74},[68,847,848,850,852,855,857,859,862,864,867,869,871,874,876],{"class":70,"line":113},[68,849,116],{"class":74},[68,851,56],{"class":78},[68,853,854],{"class":107}," :model-value",[68,856,145],{"class":74},[68,858,148],{"class":74},[68,860,861],{"class":192},"value",[68,863,148],{"class":74},[68,865,866],{"class":107}," @update:model-value",[68,868,145],{"class":74},[68,870,148],{"class":74},[68,872,873],{"class":192},"handleInput",[68,875,148],{"class":74},[68,877,121],{"class":74},[68,879,880,882,884],{"class":70,"line":124},[68,881,127],{"class":74},[68,883,79],{"class":78},[68,885,82],{"class":74},[68,887,888,890,892,894,896,898,900,902,904,906,908,910,912,914],{"class":70,"line":134},[68,889,99],{"class":74},[68,891,79],{"class":78},[68,893,142],{"class":141},[68,895,145],{"class":74},[68,897,148],{"class":74},[68,899,152],{"class":151},[68,901,155],{"class":74},[68,903,158],{"class":151},[68,905,161],{"class":74},[68,907,164],{"class":151},[68,909,148],{"class":74},[68,911,169],{"class":74},[68,913,172],{"class":151},[68,915,175],{"class":74},[68,917,918,920,922,924,926,928,930,932,934,936,938,940,942],{"class":70,"line":178},[68,919,116],{"class":74},[68,921,172],{"class":78},[68,923,185],{"class":107},[68,925,145],{"class":74},[68,927,148],{"class":74},[68,929,172],{"class":192},[68,931,148],{"class":74},[68,933,197],{"class":107},[68,935,145],{"class":74},[68,937,148],{"class":74},[68,939,204],{"class":192},[68,941,148],{"class":74},[68,943,82],{"class":74},[68,945,946,948,950,952,954,956,958,960,962,964,966,968,970],{"class":70,"line":211},[68,947,214],{"class":74},[68,949,217],{"class":78},[68,951,220],{"class":107},[68,953,145],{"class":74},[68,955,148],{"class":74},[68,957,217],{"class":192},[68,959,148],{"class":74},[68,961,197],{"class":107},[68,963,145],{"class":74},[68,965,148],{"class":74},[68,967,204],{"class":192},[68,969,148],{"class":74},[68,971,121],{"class":74},[68,973,974,976,978],{"class":70,"line":243},[68,975,246],{"class":74},[68,977,172],{"class":78},[68,979,82],{"class":74},[68,981,982,984,986],{"class":70,"line":253},[68,983,127],{"class":74},[68,985,79],{"class":78},[68,987,82],{"class":74},[68,989,990,992,994],{"class":70,"line":262},[68,991,265],{"class":74},[68,993,91],{"class":78},[68,995,82],{"class":74},[68,997,998,1000,1002],{"class":70,"line":272},[68,999,275],{"class":74},[68,1001,79],{"class":78},[68,1003,82],{"class":74},[68,1005,1006,1008,1010],{"class":70,"line":282},[68,1007,75],{"class":74},[68,1009,294],{"class":78},[68,1011,82],{"class":74},[68,1013,1014,1016,1018,1020,1022,1024,1026,1028],{"class":70,"line":289},[68,1015,302],{"class":141},[68,1017,305],{"class":74},[68,1019,308],{"class":151},[68,1021,311],{"class":74},[68,1023,314],{"class":141},[68,1025,317],{"class":74},[68,1027,320],{"class":192},[68,1029,323],{"class":74},[68,1031,1032,1034,1036,1038,1040,1042,1044,1046],{"class":70,"line":299},[68,1033,302],{"class":141},[68,1035,305],{"class":74},[68,1037,333],{"class":151},[68,1039,311],{"class":74},[68,1041,314],{"class":141},[68,1043,317],{"class":74},[68,1045,342],{"class":192},[68,1047,323],{"class":74},[68,1049,1050],{"class":70,"line":326},[68,1051,286],{"emptyLinePlaceholder":285},[68,1053,1054,1056,1058,1060,1062],{"class":70,"line":347},[68,1055,355],{"class":141},[68,1057,358],{"class":141},[68,1059,308],{"class":361},[68,1061,364],{"class":151},[68,1063,367],{"class":74},[68,1065,1066,1068,1070,1072,1074,1076],{"class":70,"line":352},[68,1067,373],{"class":78},[68,1069,376],{"class":74},[68,1071,317],{"class":74},[68,1073,381],{"class":192},[68,1075,384],{"class":74},[68,1077,387],{"class":74},[68,1079,1080,1082,1084,1086],{"class":70,"line":370},[68,1081,393],{"class":78},[68,1083,376],{"class":74},[68,1085,398],{"class":151},[68,1087,387],{"class":74},[68,1089,1090,1092,1094,1096,1098,1100,1102,1104],{"class":70,"line":390},[68,1091,406],{"class":78},[68,1093,364],{"class":74},[68,1095,412],{"class":411},[68,1097,155],{"class":74},[68,1099,305],{"class":74},[68,1101,419],{"class":411},[68,1103,422],{"class":74},[68,1105,425],{"class":74},[68,1107,1108,1111,1113,1116,1118,1121,1123,1126],{"class":70,"line":403},[68,1109,1110],{"class":107},"    const",[68,1112,305],{"class":74},[68,1114,1115],{"class":151}," value",[68,1117,155],{"class":74},[68,1119,1120],{"class":151}," update",[68,1122,311],{"class":74},[68,1124,1125],{"class":74}," =",[68,1127,1128],{"class":151}," element\n",[68,1130,1131,1133,1136,1138,1141,1144,1147,1150,1152,1154,1156],{"class":70,"line":428},[68,1132,1110],{"class":107},[68,1134,1135],{"class":151}," handleInput",[68,1137,1125],{"class":74},[68,1139,1140],{"class":74}," (",[68,1142,1143],{"class":411},"val",[68,1145,1146],{"class":74},")",[68,1148,1149],{"class":107}," =>",[68,1151,1120],{"class":361},[68,1153,364],{"class":78},[68,1155,1143],{"class":151},[68,1157,447],{"class":78},[68,1159,1160,1163,1165,1167,1169,1171],{"class":70,"line":435},[68,1161,1162],{"class":141},"    return",[68,1164,305],{"class":74},[68,1166,1115],{"class":151},[68,1168,155],{"class":74},[68,1170,1135],{"class":151},[68,1172,1173],{"class":74}," }\n",[68,1175,1176],{"class":70,"line":441},[68,1177,438],{"class":74},[68,1179,1180,1182],{"class":70,"line":450},[68,1181,444],{"class":74},[68,1183,447],{"class":151},[68,1185,1187,1189,1191],{"class":70,"line":1186},26,[68,1188,275],{"class":74},[68,1190,294],{"class":78},[68,1192,82],{"class":74},[12,1194,468,1195,1197,1198,1201,1202,1204,1205,1208],{},[54,1196,108],{}," variable gives access to Vueform's ",[54,1199,1200],{},"GenericElement"," API. From it, we destructure ",[54,1203,861],{}," and ",[54,1206,1207],{},"update",", and bind them to our Vuestic component.",[16,1210,1212],{"id":1211},"step-5-pass-props-from-vueform-to-vuestic-ui","Step 5: Pass props from Vueform to Vuestic UI",[12,1214,1215],{},"The next step is to pass props dynamically and filter out the ones that might conflict with Vueform internals:",[59,1217,1219],{"className":61,"code":1218,"language":63,"meta":64,"style":64},"\u003Cscript>\nimport { defineElement } from '@vueform\u002Fvueform'\nimport { VaInput } from 'vuestic-ui'\nimport { omit } from '.\u002Fomit'\nimport { computed } from 'vue'\n\nconst propsToOmit = ['rules']\n\nexport default defineElement({\n  name: 'VaInputElement',\n  components: [VaInput],\n  props: {\n    ...omit(VaInput.props, propsToOmit),\n  },\n  setup(props, { element }) {\n    const { value, update } = element\n    const handleInput = (val) => update(val)\n    const omittedProps = computed(() => omit(props, propsToOmit))\n    return { value, props: omittedProps, handleInput }\n  },\n})\n\u003C\u002Fscript>\n",[54,1220,1221,1229,1247,1265,1285,1304,1308,1331,1335,1347,1361,1371,1380,1403,1407,1425,1443,1467,1499,1522,1526,1532],{"__ignoreMap":64},[68,1222,1223,1225,1227],{"class":70,"line":71},[68,1224,75],{"class":74},[68,1226,294],{"class":78},[68,1228,82],{"class":74},[68,1230,1231,1233,1235,1237,1239,1241,1243,1245],{"class":70,"line":85},[68,1232,302],{"class":141},[68,1234,305],{"class":74},[68,1236,308],{"class":151},[68,1238,311],{"class":74},[68,1240,314],{"class":141},[68,1242,317],{"class":74},[68,1244,320],{"class":192},[68,1246,323],{"class":74},[68,1248,1249,1251,1253,1255,1257,1259,1261,1263],{"class":70,"line":96},[68,1250,302],{"class":141},[68,1252,305],{"class":74},[68,1254,333],{"class":151},[68,1256,311],{"class":74},[68,1258,314],{"class":141},[68,1260,317],{"class":74},[68,1262,342],{"class":192},[68,1264,323],{"class":74},[68,1266,1267,1269,1271,1274,1276,1278,1280,1283],{"class":70,"line":113},[68,1268,302],{"class":141},[68,1270,305],{"class":74},[68,1272,1273],{"class":151}," omit",[68,1275,311],{"class":74},[68,1277,314],{"class":141},[68,1279,317],{"class":74},[68,1281,1282],{"class":192},".\u002Fomit",[68,1284,323],{"class":74},[68,1286,1287,1289,1291,1294,1296,1298,1300,1302],{"class":70,"line":124},[68,1288,302],{"class":141},[68,1290,305],{"class":74},[68,1292,1293],{"class":151}," computed",[68,1295,311],{"class":74},[68,1297,314],{"class":141},[68,1299,317],{"class":74},[68,1301,63],{"class":192},[68,1303,323],{"class":74},[68,1305,1306],{"class":70,"line":134},[68,1307,286],{"emptyLinePlaceholder":285},[68,1309,1310,1313,1316,1318,1321,1323,1326,1328],{"class":70,"line":178},[68,1311,1312],{"class":107},"const",[68,1314,1315],{"class":151}," propsToOmit ",[68,1317,145],{"class":74},[68,1319,1320],{"class":151}," [",[68,1322,384],{"class":74},[68,1324,1325],{"class":192},"rules",[68,1327,384],{"class":74},[68,1329,1330],{"class":151},"]\n",[68,1332,1333],{"class":70,"line":211},[68,1334,286],{"emptyLinePlaceholder":285},[68,1336,1337,1339,1341,1343,1345],{"class":70,"line":243},[68,1338,355],{"class":141},[68,1340,358],{"class":141},[68,1342,308],{"class":361},[68,1344,364],{"class":151},[68,1346,367],{"class":74},[68,1348,1349,1351,1353,1355,1357,1359],{"class":70,"line":253},[68,1350,373],{"class":78},[68,1352,376],{"class":74},[68,1354,317],{"class":74},[68,1356,381],{"class":192},[68,1358,384],{"class":74},[68,1360,387],{"class":74},[68,1362,1363,1365,1367,1369],{"class":70,"line":262},[68,1364,393],{"class":78},[68,1366,376],{"class":74},[68,1368,398],{"class":151},[68,1370,387],{"class":74},[68,1372,1373,1376,1378],{"class":70,"line":272},[68,1374,1375],{"class":78},"  props",[68,1377,376],{"class":74},[68,1379,425],{"class":74},[68,1381,1382,1385,1388,1391,1394,1396,1398,1401],{"class":70,"line":282},[68,1383,1384],{"class":74},"    ...",[68,1386,1387],{"class":361},"omit",[68,1389,1390],{"class":151},"(VaInput",[68,1392,1393],{"class":74},".",[68,1395,412],{"class":151},[68,1397,155],{"class":74},[68,1399,1400],{"class":151}," propsToOmit)",[68,1402,387],{"class":74},[68,1404,1405],{"class":70,"line":289},[68,1406,438],{"class":74},[68,1408,1409,1411,1413,1415,1417,1419,1421,1423],{"class":70,"line":299},[68,1410,406],{"class":78},[68,1412,364],{"class":74},[68,1414,412],{"class":411},[68,1416,155],{"class":74},[68,1418,305],{"class":74},[68,1420,419],{"class":411},[68,1422,422],{"class":74},[68,1424,425],{"class":74},[68,1426,1427,1429,1431,1433,1435,1437,1439,1441],{"class":70,"line":326},[68,1428,1110],{"class":107},[68,1430,305],{"class":74},[68,1432,1115],{"class":151},[68,1434,155],{"class":74},[68,1436,1120],{"class":151},[68,1438,311],{"class":74},[68,1440,1125],{"class":74},[68,1442,1128],{"class":151},[68,1444,1445,1447,1449,1451,1453,1455,1457,1459,1461,1463,1465],{"class":70,"line":347},[68,1446,1110],{"class":107},[68,1448,1135],{"class":151},[68,1450,1125],{"class":74},[68,1452,1140],{"class":74},[68,1454,1143],{"class":411},[68,1456,1146],{"class":74},[68,1458,1149],{"class":107},[68,1460,1120],{"class":361},[68,1462,364],{"class":78},[68,1464,1143],{"class":151},[68,1466,447],{"class":78},[68,1468,1469,1471,1474,1476,1478,1480,1483,1485,1487,1489,1491,1493,1496],{"class":70,"line":352},[68,1470,1110],{"class":107},[68,1472,1473],{"class":151}," omittedProps",[68,1475,1125],{"class":74},[68,1477,1293],{"class":361},[68,1479,364],{"class":78},[68,1481,1482],{"class":74},"()",[68,1484,1149],{"class":107},[68,1486,1273],{"class":361},[68,1488,364],{"class":78},[68,1490,412],{"class":151},[68,1492,155],{"class":74},[68,1494,1495],{"class":151}," propsToOmit",[68,1497,1498],{"class":78},"))\n",[68,1500,1501,1503,1505,1507,1509,1512,1514,1516,1518,1520],{"class":70,"line":370},[68,1502,1162],{"class":141},[68,1504,305],{"class":74},[68,1506,1115],{"class":151},[68,1508,155],{"class":74},[68,1510,1511],{"class":78}," props",[68,1513,376],{"class":74},[68,1515,1473],{"class":151},[68,1517,155],{"class":74},[68,1519,1135],{"class":151},[68,1521,1173],{"class":74},[68,1523,1524],{"class":70,"line":390},[68,1525,438],{"class":74},[68,1527,1528,1530],{"class":70,"line":403},[68,1529,444],{"class":74},[68,1531,447],{"class":151},[68,1533,1534,1536,1538],{"class":70,"line":428},[68,1535,275],{"class":74},[68,1537,294],{"class":78},[68,1539,82],{"class":74},[12,1541,1542,1543,1546,1547,1549],{},"Wrapping with ",[54,1544,1545],{},"computed()"," ensures reactivity. We omit props like ",[54,1548,1325],{}," to avoid conflicts.",[16,1551,1553],{"id":1552},"step-6-add-validation-with-the-rules-prop","Step 6: Add validation with the rules prop",[12,1555,1556,1557,1559],{},"Now we can pass the ",[54,1558,1325],{}," prop and see how it works:",[59,1561,1563],{"className":61,"code":1562,"language":63,"meta":64,"style":64},"\u003Ctemplate>\n  \u003CVueform>\n    \u003CVaInputElement name=\"MyCustomInput\" rules=\"required|email|min:5\" \u002F>\n  \u003C\u002FVueform>\n\u003C\u002Ftemplate>\n",[54,1564,1565,1573,1581,1611,1619],{"__ignoreMap":64},[68,1566,1567,1569,1571],{"class":70,"line":71},[68,1568,75],{"class":74},[68,1570,79],{"class":78},[68,1572,82],{"class":74},[68,1574,1575,1577,1579],{"class":70,"line":85},[68,1576,88],{"class":74},[68,1578,703],{"class":78},[68,1580,82],{"class":74},[68,1582,1583,1585,1587,1589,1591,1593,1595,1597,1600,1602,1604,1607,1609],{"class":70,"line":96},[68,1584,99],{"class":74},[68,1586,381],{"class":78},[68,1588,714],{"class":107},[68,1590,145],{"class":74},[68,1592,148],{"class":74},[68,1594,721],{"class":192},[68,1596,148],{"class":74},[68,1598,1599],{"class":107}," rules",[68,1601,145],{"class":74},[68,1603,148],{"class":74},[68,1605,1606],{"class":192},"required|email|min:5",[68,1608,148],{"class":74},[68,1610,121],{"class":74},[68,1612,1613,1615,1617],{"class":70,"line":113},[68,1614,265],{"class":74},[68,1616,703],{"class":78},[68,1618,82],{"class":74},[68,1620,1621,1623,1625],{"class":70,"line":124},[68,1622,275],{"class":74},[68,1624,79],{"class":78},[68,1626,82],{"class":74},[12,1628,1629],{},"Vueform will now validate the field using the provided rules, giving you full form validation support just like with native Vueform inputs.",[16,1631,1633],{"id":1632},"step-7-add-event-listeners-using-fire","Step 7: Add event listeners using fire()",[12,1635,1636,1637,1639,1640,1643,1644,1646,1647,1650,1651,1654,1655,1658],{},"To handle events, we first explicitly specify them in ",[54,1638,461],{}," and use the ",[54,1641,1642],{},"fire"," function from ",[54,1645,108],{},". We use ",[54,1648,1649],{},"fire()"," instead of native ",[54,1652,1653],{},"context.emit()"," because this way we can listen for events when our element is defined in the schema. To avoid binding each listener manually, we use ",[54,1656,1657],{},"reduce()"," to build a listeners object dynamically:",[59,1660,1664],{"className":1661,"code":1662,"language":1663,"meta":64,"style":64},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const listeners = this.emits.reduce((acc, curr) => {\n  acc[curr] = (...args) => {\n    fire(curr, ...args)\n  }\n  return acc\n}, {})\n","js",[54,1665,1666,1704,1732,1750,1755,1763],{"__ignoreMap":64},[68,1667,1668,1670,1673,1675,1678,1681,1683,1686,1688,1690,1693,1695,1698,1700,1702],{"class":70,"line":71},[68,1669,1312],{"class":107},[68,1671,1672],{"class":151}," listeners ",[68,1674,145],{"class":74},[68,1676,1677],{"class":74}," this.",[68,1679,1680],{"class":151},"emits",[68,1682,1393],{"class":74},[68,1684,1685],{"class":361},"reduce",[68,1687,364],{"class":151},[68,1689,364],{"class":74},[68,1691,1692],{"class":411},"acc",[68,1694,155],{"class":74},[68,1696,1697],{"class":411}," curr",[68,1699,1146],{"class":74},[68,1701,1149],{"class":107},[68,1703,425],{"class":74},[68,1705,1706,1709,1712,1715,1718,1720,1723,1726,1728,1730],{"class":70,"line":85},[68,1707,1708],{"class":151},"  acc",[68,1710,1711],{"class":78},"[",[68,1713,1714],{"class":151},"curr",[68,1716,1717],{"class":78},"] ",[68,1719,145],{"class":74},[68,1721,1722],{"class":74}," (...",[68,1724,1725],{"class":411},"args",[68,1727,1146],{"class":74},[68,1729,1149],{"class":107},[68,1731,425],{"class":74},[68,1733,1734,1737,1739,1741,1743,1746,1748],{"class":70,"line":96},[68,1735,1736],{"class":361},"    fire",[68,1738,364],{"class":78},[68,1740,1714],{"class":151},[68,1742,155],{"class":74},[68,1744,1745],{"class":74}," ...",[68,1747,1725],{"class":151},[68,1749,447],{"class":78},[68,1751,1752],{"class":70,"line":113},[68,1753,1754],{"class":74},"  }\n",[68,1756,1757,1760],{"class":70,"line":124},[68,1758,1759],{"class":141},"  return",[68,1761,1762],{"class":151}," acc\n",[68,1764,1765,1768,1771],{"class":70,"line":134},[68,1766,1767],{"class":74},"},",[68,1769,1770],{"class":74}," {}",[68,1772,447],{"class":151},[12,1774,1775,1776,376],{},"Then we bind all emitted events via ",[54,1777,1778],{},"v-on=\"listeners\"",[59,1780,1782],{"className":61,"code":1781,"language":63,"meta":64,"style":64},"\u003CVaInput v-bind=\"props\" :model-value=\"value\" @update:model-value=\"handleInput\" v-on=\"listeners\" \u002F>\n",[54,1783,1784],{"__ignoreMap":64},[68,1785,1786,1788,1790,1793,1795,1797,1799,1801,1804,1806,1808,1810,1812,1814,1817,1819,1821,1823,1825,1827,1829,1831,1834,1836,1838,1841,1843],{"class":70,"line":71},[68,1787,75],{"class":74},[68,1789,56],{"class":78},[68,1791,1792],{"class":107}," v-bind",[68,1794,145],{"class":74},[68,1796,148],{"class":74},[68,1798,412],{"class":151},[68,1800,148],{"class":74},[68,1802,1803],{"class":74}," :",[68,1805,807],{"class":107},[68,1807,145],{"class":74},[68,1809,148],{"class":74},[68,1811,861],{"class":151},[68,1813,148],{"class":74},[68,1815,1816],{"class":74}," @",[68,1818,1207],{"class":107},[68,1820,376],{"class":74},[68,1822,807],{"class":107},[68,1824,145],{"class":74},[68,1826,148],{"class":74},[68,1828,873],{"class":151},[68,1830,148],{"class":74},[68,1832,1833],{"class":107}," v-on",[68,1835,145],{"class":74},[68,1837,148],{"class":74},[68,1839,1840],{"class":151},"listeners",[68,1842,148],{"class":74},[68,1844,121],{"class":74},[16,1846,1848],{"id":1847},"step-8-handle-vuestic-and-schema-slots","Step 8: Handle Vuestic and schema slots",[12,1850,1851],{},"Although the generic slot block can be removed, here's how to resolve slot conflicts between Vuestic-specific slots and schema-defined slots:",[59,1853,1855],{"className":61,"code":1854,"language":63,"meta":64,"style":64},"\u003Ctemplate>\n  \u003CElementLayout>\n    \u003Ctemplate #element>\n      \u003CVaInput v-bind=\"props\" :model-value=\"value\" @update:model-value=\"handleInput\" v-on=\"listeners\">\n\n        \u003Ctemplate v-for=\"slotKey in vuesticSlotKeys\" #[slotKey]=\"slotProps\">\n          \u003Cslot :name=\"slotKey\" v-bind=\"slotProps\" \u002F>\n        \u003C\u002Ftemplate>\n\n        \u003Ctemplate v-for=\"(component, slot) in schemaSlots\" #[slot]=\"slotProps\">\n          \u003Cslot :name=\"slot\" :el$=\"el$\" v-bind=\"slotProps\">\n            \u003Ccomponent :is=\"component\" :el$=\"el$\" \u002F>\n          \u003C\u002Fslot>\n        \u003C\u002Ftemplate>\n\n      \u003C\u002FVaInput>\n    \u003C\u002Ftemplate>\n\n    \u003Ctemplate v-for=\"(component, slot) in elementSlots\" #[slot]>\n      \u003Cslot :name=\"slot\" :el$=\"el$\">\n        \u003Ccomponent :is=\"component\" :el$=\"el$\" \u002F>\n      \u003C\u002Fslot>\n    \u003C\u002Ftemplate>\n  \u003C\u002FElementLayout>\n\u003C\u002Ftemplate>\n",[54,1856,1857,1865,1873,1885,1933,1937,1976,2005,2014,2018,2057,2095,2124,2133,2141,2145,2153,2161,2165,2195,2223,2251,2259,2267,2275],{"__ignoreMap":64},[68,1858,1859,1861,1863],{"class":70,"line":71},[68,1860,75],{"class":74},[68,1862,79],{"class":78},[68,1864,82],{"class":74},[68,1866,1867,1869,1871],{"class":70,"line":85},[68,1868,88],{"class":74},[68,1870,91],{"class":78},[68,1872,82],{"class":74},[68,1874,1875,1877,1879,1881,1883],{"class":70,"line":96},[68,1876,99],{"class":74},[68,1878,79],{"class":78},[68,1880,104],{"class":74},[68,1882,108],{"class":107},[68,1884,82],{"class":74},[68,1886,1887,1889,1891,1893,1895,1897,1899,1901,1903,1905,1907,1909,1911,1913,1915,1917,1919,1921,1923,1925,1927,1929,1931],{"class":70,"line":113},[68,1888,116],{"class":74},[68,1890,56],{"class":78},[68,1892,1792],{"class":107},[68,1894,145],{"class":74},[68,1896,148],{"class":74},[68,1898,412],{"class":192},[68,1900,148],{"class":74},[68,1902,854],{"class":107},[68,1904,145],{"class":74},[68,1906,148],{"class":74},[68,1908,861],{"class":192},[68,1910,148],{"class":74},[68,1912,866],{"class":107},[68,1914,145],{"class":74},[68,1916,148],{"class":74},[68,1918,873],{"class":192},[68,1920,148],{"class":74},[68,1922,1833],{"class":107},[68,1924,145],{"class":74},[68,1926,148],{"class":74},[68,1928,1840],{"class":192},[68,1930,148],{"class":74},[68,1932,82],{"class":74},[68,1934,1935],{"class":70,"line":124},[68,1936,286],{"emptyLinePlaceholder":285},[68,1938,1939,1941,1943,1945,1947,1949,1952,1954,1957,1959,1961,1964,1967,1969,1972,1974],{"class":70,"line":134},[68,1940,214],{"class":74},[68,1942,79],{"class":78},[68,1944,142],{"class":141},[68,1946,145],{"class":74},[68,1948,148],{"class":74},[68,1950,1951],{"class":151},"slotKey ",[68,1953,161],{"class":74},[68,1955,1956],{"class":151}," vuesticSlotKeys",[68,1958,148],{"class":74},[68,1960,169],{"class":74},[68,1962,1963],{"class":151},"slotKey",[68,1965,1966],{"class":74},"]=",[68,1968,148],{"class":74},[68,1970,1971],{"class":151},"slotProps",[68,1973,148],{"class":74},[68,1975,82],{"class":74},[68,1977,1978,1981,1983,1985,1987,1989,1991,1993,1995,1997,1999,2001,2003],{"class":70,"line":178},[68,1979,1980],{"class":74},"          \u003C",[68,1982,172],{"class":78},[68,1984,185],{"class":107},[68,1986,145],{"class":74},[68,1988,148],{"class":74},[68,1990,1963],{"class":192},[68,1992,148],{"class":74},[68,1994,1792],{"class":107},[68,1996,145],{"class":74},[68,1998,148],{"class":74},[68,2000,1971],{"class":192},[68,2002,148],{"class":74},[68,2004,121],{"class":74},[68,2006,2007,2010,2012],{"class":70,"line":211},[68,2008,2009],{"class":74},"        \u003C\u002F",[68,2011,79],{"class":78},[68,2013,82],{"class":74},[68,2015,2016],{"class":70,"line":243},[68,2017,286],{"emptyLinePlaceholder":285},[68,2019,2020,2022,2024,2026,2028,2030,2032,2034,2036,2038,2041,2043,2045,2047,2049,2051,2053,2055],{"class":70,"line":253},[68,2021,214],{"class":74},[68,2023,79],{"class":78},[68,2025,142],{"class":141},[68,2027,145],{"class":74},[68,2029,148],{"class":74},[68,2031,152],{"class":151},[68,2033,155],{"class":74},[68,2035,158],{"class":151},[68,2037,161],{"class":74},[68,2039,2040],{"class":151}," schemaSlots",[68,2042,148],{"class":74},[68,2044,169],{"class":74},[68,2046,172],{"class":151},[68,2048,1966],{"class":74},[68,2050,148],{"class":74},[68,2052,1971],{"class":151},[68,2054,148],{"class":74},[68,2056,82],{"class":74},[68,2058,2059,2061,2063,2065,2067,2069,2071,2073,2075,2077,2079,2081,2083,2085,2087,2089,2091,2093],{"class":70,"line":262},[68,2060,1980],{"class":74},[68,2062,172],{"class":78},[68,2064,185],{"class":107},[68,2066,145],{"class":74},[68,2068,148],{"class":74},[68,2070,172],{"class":192},[68,2072,148],{"class":74},[68,2074,197],{"class":107},[68,2076,145],{"class":74},[68,2078,148],{"class":74},[68,2080,204],{"class":192},[68,2082,148],{"class":74},[68,2084,1792],{"class":107},[68,2086,145],{"class":74},[68,2088,148],{"class":74},[68,2090,1971],{"class":192},[68,2092,148],{"class":74},[68,2094,82],{"class":74},[68,2096,2097,2100,2102,2104,2106,2108,2110,2112,2114,2116,2118,2120,2122],{"class":70,"line":272},[68,2098,2099],{"class":74},"            \u003C",[68,2101,217],{"class":78},[68,2103,220],{"class":107},[68,2105,145],{"class":74},[68,2107,148],{"class":74},[68,2109,217],{"class":192},[68,2111,148],{"class":74},[68,2113,197],{"class":107},[68,2115,145],{"class":74},[68,2117,148],{"class":74},[68,2119,204],{"class":192},[68,2121,148],{"class":74},[68,2123,121],{"class":74},[68,2125,2126,2129,2131],{"class":70,"line":282},[68,2127,2128],{"class":74},"          \u003C\u002F",[68,2130,172],{"class":78},[68,2132,82],{"class":74},[68,2134,2135,2137,2139],{"class":70,"line":289},[68,2136,2009],{"class":74},[68,2138,79],{"class":78},[68,2140,82],{"class":74},[68,2142,2143],{"class":70,"line":299},[68,2144,286],{"emptyLinePlaceholder":285},[68,2146,2147,2149,2151],{"class":70,"line":326},[68,2148,246],{"class":74},[68,2150,56],{"class":78},[68,2152,82],{"class":74},[68,2154,2155,2157,2159],{"class":70,"line":347},[68,2156,127],{"class":74},[68,2158,79],{"class":78},[68,2160,82],{"class":74},[68,2162,2163],{"class":70,"line":352},[68,2164,286],{"emptyLinePlaceholder":285},[68,2166,2167,2169,2171,2173,2175,2177,2179,2181,2183,2185,2187,2189,2191,2193],{"class":70,"line":370},[68,2168,99],{"class":74},[68,2170,79],{"class":78},[68,2172,142],{"class":141},[68,2174,145],{"class":74},[68,2176,148],{"class":74},[68,2178,152],{"class":151},[68,2180,155],{"class":74},[68,2182,158],{"class":151},[68,2184,161],{"class":74},[68,2186,164],{"class":151},[68,2188,148],{"class":74},[68,2190,169],{"class":74},[68,2192,172],{"class":151},[68,2194,175],{"class":74},[68,2196,2197,2199,2201,2203,2205,2207,2209,2211,2213,2215,2217,2219,2221],{"class":70,"line":390},[68,2198,116],{"class":74},[68,2200,172],{"class":78},[68,2202,185],{"class":107},[68,2204,145],{"class":74},[68,2206,148],{"class":74},[68,2208,172],{"class":192},[68,2210,148],{"class":74},[68,2212,197],{"class":107},[68,2214,145],{"class":74},[68,2216,148],{"class":74},[68,2218,204],{"class":192},[68,2220,148],{"class":74},[68,2222,82],{"class":74},[68,2224,2225,2227,2229,2231,2233,2235,2237,2239,2241,2243,2245,2247,2249],{"class":70,"line":403},[68,2226,214],{"class":74},[68,2228,217],{"class":78},[68,2230,220],{"class":107},[68,2232,145],{"class":74},[68,2234,148],{"class":74},[68,2236,217],{"class":192},[68,2238,148],{"class":74},[68,2240,197],{"class":107},[68,2242,145],{"class":74},[68,2244,148],{"class":74},[68,2246,204],{"class":192},[68,2248,148],{"class":74},[68,2250,121],{"class":74},[68,2252,2253,2255,2257],{"class":70,"line":428},[68,2254,246],{"class":74},[68,2256,172],{"class":78},[68,2258,82],{"class":74},[68,2260,2261,2263,2265],{"class":70,"line":435},[68,2262,127],{"class":74},[68,2264,79],{"class":78},[68,2266,82],{"class":74},[68,2268,2269,2271,2273],{"class":70,"line":441},[68,2270,265],{"class":74},[68,2272,91],{"class":78},[68,2274,82],{"class":74},[68,2276,2277,2279,2281],{"class":70,"line":450},[68,2278,275],{"class":74},[68,2280,79],{"class":78},[68,2282,82],{"class":74},[16,2284,2286],{"id":2285},"step-9-use-slots-in-the-schema","Step 9: Use slots in the schema",[59,2288,2290],{"className":61,"code":2289,"language":63,"meta":64,"style":64},"\u003Ctemplate>\n  \u003CVueform>\n    \u003CVaInputElement name=\"MyCustomInput\" rules=\"required|email|min:5\" @update:modelValue=\"console.log($event)\">\n      \u003Ctemplate #appendInner>\n        appendInner\n      \u003C\u002Ftemplate>\n    \u003C\u002FVaInputElement>\n  \u003C\u002FVueform>\n\u003C\u002Ftemplate>\n",[54,2291,2292,2300,2308,2348,2361,2366,2374,2382,2390],{"__ignoreMap":64},[68,2293,2294,2296,2298],{"class":70,"line":71},[68,2295,75],{"class":74},[68,2297,79],{"class":78},[68,2299,82],{"class":74},[68,2301,2302,2304,2306],{"class":70,"line":85},[68,2303,88],{"class":74},[68,2305,703],{"class":78},[68,2307,82],{"class":74},[68,2309,2310,2312,2314,2316,2318,2320,2322,2324,2326,2328,2330,2332,2334,2337,2339,2341,2344,2346],{"class":70,"line":96},[68,2311,99],{"class":74},[68,2313,381],{"class":78},[68,2315,714],{"class":107},[68,2317,145],{"class":74},[68,2319,148],{"class":74},[68,2321,721],{"class":192},[68,2323,148],{"class":74},[68,2325,1599],{"class":107},[68,2327,145],{"class":74},[68,2329,148],{"class":74},[68,2331,1606],{"class":192},[68,2333,148],{"class":74},[68,2335,2336],{"class":107}," @update:modelValue",[68,2338,145],{"class":74},[68,2340,148],{"class":74},[68,2342,2343],{"class":192},"console.log($event)",[68,2345,148],{"class":74},[68,2347,82],{"class":74},[68,2349,2350,2352,2354,2356,2359],{"class":70,"line":113},[68,2351,116],{"class":74},[68,2353,79],{"class":78},[68,2355,104],{"class":74},[68,2357,2358],{"class":107},"appendInner",[68,2360,82],{"class":74},[68,2362,2363],{"class":70,"line":124},[68,2364,2365],{"class":151},"        appendInner\n",[68,2367,2368,2370,2372],{"class":70,"line":134},[68,2369,246],{"class":74},[68,2371,79],{"class":78},[68,2373,82],{"class":74},[68,2375,2376,2378,2380],{"class":70,"line":178},[68,2377,127],{"class":74},[68,2379,381],{"class":78},[68,2381,82],{"class":74},[68,2383,2384,2386,2388],{"class":70,"line":211},[68,2385,265],{"class":74},[68,2387,703],{"class":78},[68,2389,82],{"class":74},[68,2391,2392,2394,2396],{"class":70,"line":243},[68,2393,275],{"class":74},[68,2395,79],{"class":78},[68,2397,82],{"class":74},[16,2399,2401],{"id":2400},"step-10-extract-defineelement-logic-for-reusability","Step 10: Extract defineElement logic for reusability",[12,2403,2404,2405,2407],{},"If you're going to integrate a large number of components, it makes sense to put the ",[54,2406,461],{}," logic in a separate function so you don't repeat yourself:",[59,2409,2411],{"className":1661,"code":2410,"language":1663,"meta":64,"style":64},"import { defineElement } from '@vueform\u002Fvueform'\nimport { computed } from 'vue'\nimport { omit } from '.\u002Fomit'\n\nexport function defineVuesticElement({ name, components, props, emits, propsToOmit }) {\n  return defineElement({\n    name,\n    components,\n    props,\n    emits,\n    setup(props, { element, slots }) {\n      const { value, update, fire, elementSlots } = element\n      const handleInput = (val) => update(val)\n      const omittedProps = computed(() => omit(props, propsToOmit))\n\n      const listeners = this.emits.reduce((acc, curr) => {\n        acc[curr] = (...args) => { fire(curr, ...args) }\n        return acc\n      }, {})\n\n      const vueFormSlotNames = Object.keys(elementSlots.value)\n      const allSlotNames = Object.keys(slots)\n      const vuesticSlotKeys = allSlotNames.filter(\n        name => !vueFormSlotNames.includes(name)\n      )\n\n      const schemaSlots = computed(() => {\n        const result = {}\n        for (const key in props.slots) {\n          if (!vueFormSlotNames.includes(key)) {\n            result[key] = props.slots[key]\n          }\n        }\n        return result\n      })\n\n      return {\n        value,\n        props: omittedProps,\n        listeners,\n        vuesticSlotKeys,\n        schemaSlots,\n        handleInput,\n      }\n    },\n  })\n}\n",[54,2412,2413,2431,2449,2467,2471,2508,2518,2525,2532,2539,2546,2570,2598,2622,2650,2654,2687,2728,2735,2744,2748,2776,2798,2816,2840,2845,2849,2868,2882,2908,2935,2961,2967,2973,2981,2989,2994,3002,3010,3022,3030,3038,3046,3054,3060,3066,3074],{"__ignoreMap":64},[68,2414,2415,2417,2419,2421,2423,2425,2427,2429],{"class":70,"line":71},[68,2416,302],{"class":141},[68,2418,305],{"class":74},[68,2420,308],{"class":151},[68,2422,311],{"class":74},[68,2424,314],{"class":141},[68,2426,317],{"class":74},[68,2428,320],{"class":192},[68,2430,323],{"class":74},[68,2432,2433,2435,2437,2439,2441,2443,2445,2447],{"class":70,"line":85},[68,2434,302],{"class":141},[68,2436,305],{"class":74},[68,2438,1293],{"class":151},[68,2440,311],{"class":74},[68,2442,314],{"class":141},[68,2444,317],{"class":74},[68,2446,63],{"class":192},[68,2448,323],{"class":74},[68,2450,2451,2453,2455,2457,2459,2461,2463,2465],{"class":70,"line":96},[68,2452,302],{"class":141},[68,2454,305],{"class":74},[68,2456,1273],{"class":151},[68,2458,311],{"class":74},[68,2460,314],{"class":141},[68,2462,317],{"class":74},[68,2464,1282],{"class":192},[68,2466,323],{"class":74},[68,2468,2469],{"class":70,"line":113},[68,2470,286],{"emptyLinePlaceholder":285},[68,2472,2473,2475,2478,2481,2484,2486,2488,2491,2493,2495,2497,2500,2502,2504,2506],{"class":70,"line":124},[68,2474,355],{"class":141},[68,2476,2477],{"class":107}," function",[68,2479,2480],{"class":361}," defineVuesticElement",[68,2482,2483],{"class":74},"({",[68,2485,714],{"class":411},[68,2487,155],{"class":74},[68,2489,2490],{"class":411}," components",[68,2492,155],{"class":74},[68,2494,1511],{"class":411},[68,2496,155],{"class":74},[68,2498,2499],{"class":411}," emits",[68,2501,155],{"class":74},[68,2503,1495],{"class":411},[68,2505,422],{"class":74},[68,2507,425],{"class":74},[68,2509,2510,2512,2514,2516],{"class":70,"line":134},[68,2511,1759],{"class":141},[68,2513,308],{"class":361},[68,2515,364],{"class":78},[68,2517,367],{"class":74},[68,2519,2520,2523],{"class":70,"line":178},[68,2521,2522],{"class":151},"    name",[68,2524,387],{"class":74},[68,2526,2527,2530],{"class":70,"line":211},[68,2528,2529],{"class":151},"    components",[68,2531,387],{"class":74},[68,2533,2534,2537],{"class":70,"line":243},[68,2535,2536],{"class":151},"    props",[68,2538,387],{"class":74},[68,2540,2541,2544],{"class":70,"line":253},[68,2542,2543],{"class":151},"    emits",[68,2545,387],{"class":74},[68,2547,2548,2551,2553,2555,2557,2559,2561,2563,2566,2568],{"class":70,"line":262},[68,2549,2550],{"class":78},"    setup",[68,2552,364],{"class":74},[68,2554,412],{"class":411},[68,2556,155],{"class":74},[68,2558,305],{"class":74},[68,2560,419],{"class":411},[68,2562,155],{"class":74},[68,2564,2565],{"class":411}," slots",[68,2567,422],{"class":74},[68,2569,425],{"class":74},[68,2571,2572,2575,2577,2579,2581,2583,2585,2588,2590,2592,2594,2596],{"class":70,"line":272},[68,2573,2574],{"class":107},"      const",[68,2576,305],{"class":74},[68,2578,1115],{"class":151},[68,2580,155],{"class":74},[68,2582,1120],{"class":151},[68,2584,155],{"class":74},[68,2586,2587],{"class":151}," fire",[68,2589,155],{"class":74},[68,2591,164],{"class":151},[68,2593,311],{"class":74},[68,2595,1125],{"class":74},[68,2597,1128],{"class":151},[68,2599,2600,2602,2604,2606,2608,2610,2612,2614,2616,2618,2620],{"class":70,"line":282},[68,2601,2574],{"class":107},[68,2603,1135],{"class":151},[68,2605,1125],{"class":74},[68,2607,1140],{"class":74},[68,2609,1143],{"class":411},[68,2611,1146],{"class":74},[68,2613,1149],{"class":107},[68,2615,1120],{"class":361},[68,2617,364],{"class":78},[68,2619,1143],{"class":151},[68,2621,447],{"class":78},[68,2623,2624,2626,2628,2630,2632,2634,2636,2638,2640,2642,2644,2646,2648],{"class":70,"line":289},[68,2625,2574],{"class":107},[68,2627,1473],{"class":151},[68,2629,1125],{"class":74},[68,2631,1293],{"class":361},[68,2633,364],{"class":78},[68,2635,1482],{"class":74},[68,2637,1149],{"class":107},[68,2639,1273],{"class":361},[68,2641,364],{"class":78},[68,2643,412],{"class":151},[68,2645,155],{"class":74},[68,2647,1495],{"class":151},[68,2649,1498],{"class":78},[68,2651,2652],{"class":70,"line":299},[68,2653,286],{"emptyLinePlaceholder":285},[68,2655,2656,2658,2661,2663,2665,2667,2669,2671,2673,2675,2677,2679,2681,2683,2685],{"class":70,"line":326},[68,2657,2574],{"class":107},[68,2659,2660],{"class":151}," listeners",[68,2662,1125],{"class":74},[68,2664,1677],{"class":74},[68,2666,1680],{"class":151},[68,2668,1393],{"class":74},[68,2670,1685],{"class":361},[68,2672,364],{"class":78},[68,2674,364],{"class":74},[68,2676,1692],{"class":411},[68,2678,155],{"class":74},[68,2680,1697],{"class":411},[68,2682,1146],{"class":74},[68,2684,1149],{"class":107},[68,2686,425],{"class":74},[68,2688,2689,2692,2694,2696,2698,2700,2702,2704,2706,2708,2710,2712,2714,2716,2718,2720,2722,2725],{"class":70,"line":347},[68,2690,2691],{"class":151},"        acc",[68,2693,1711],{"class":78},[68,2695,1714],{"class":151},[68,2697,1717],{"class":78},[68,2699,145],{"class":74},[68,2701,1722],{"class":74},[68,2703,1725],{"class":411},[68,2705,1146],{"class":74},[68,2707,1149],{"class":107},[68,2709,305],{"class":74},[68,2711,2587],{"class":361},[68,2713,364],{"class":78},[68,2715,1714],{"class":151},[68,2717,155],{"class":74},[68,2719,1745],{"class":74},[68,2721,1725],{"class":151},[68,2723,2724],{"class":78},") ",[68,2726,2727],{"class":74},"}\n",[68,2729,2730,2733],{"class":70,"line":352},[68,2731,2732],{"class":141},"        return",[68,2734,1762],{"class":151},[68,2736,2737,2740,2742],{"class":70,"line":370},[68,2738,2739],{"class":74},"      },",[68,2741,1770],{"class":74},[68,2743,447],{"class":78},[68,2745,2746],{"class":70,"line":390},[68,2747,286],{"emptyLinePlaceholder":285},[68,2749,2750,2752,2755,2757,2760,2762,2765,2767,2770,2772,2774],{"class":70,"line":403},[68,2751,2574],{"class":107},[68,2753,2754],{"class":151}," vueFormSlotNames",[68,2756,1125],{"class":74},[68,2758,2759],{"class":151}," Object",[68,2761,1393],{"class":74},[68,2763,2764],{"class":361},"keys",[68,2766,364],{"class":78},[68,2768,2769],{"class":151},"elementSlots",[68,2771,1393],{"class":74},[68,2773,861],{"class":151},[68,2775,447],{"class":78},[68,2777,2778,2780,2783,2785,2787,2789,2791,2793,2796],{"class":70,"line":428},[68,2779,2574],{"class":107},[68,2781,2782],{"class":151}," allSlotNames",[68,2784,1125],{"class":74},[68,2786,2759],{"class":151},[68,2788,1393],{"class":74},[68,2790,2764],{"class":361},[68,2792,364],{"class":78},[68,2794,2795],{"class":151},"slots",[68,2797,447],{"class":78},[68,2799,2800,2802,2804,2806,2808,2810,2813],{"class":70,"line":435},[68,2801,2574],{"class":107},[68,2803,1956],{"class":151},[68,2805,1125],{"class":74},[68,2807,2782],{"class":151},[68,2809,1393],{"class":74},[68,2811,2812],{"class":361},"filter",[68,2814,2815],{"class":78},"(\n",[68,2817,2818,2821,2823,2826,2829,2831,2834,2836,2838],{"class":70,"line":441},[68,2819,2820],{"class":411},"        name",[68,2822,1149],{"class":107},[68,2824,2825],{"class":74}," !",[68,2827,2828],{"class":151},"vueFormSlotNames",[68,2830,1393],{"class":74},[68,2832,2833],{"class":361},"includes",[68,2835,364],{"class":78},[68,2837,796],{"class":151},[68,2839,447],{"class":78},[68,2841,2842],{"class":70,"line":450},[68,2843,2844],{"class":78},"      )\n",[68,2846,2847],{"class":70,"line":1186},[68,2848,286],{"emptyLinePlaceholder":285},[68,2850,2852,2854,2856,2858,2860,2862,2864,2866],{"class":70,"line":2851},27,[68,2853,2574],{"class":107},[68,2855,2040],{"class":151},[68,2857,1125],{"class":74},[68,2859,1293],{"class":361},[68,2861,364],{"class":78},[68,2863,1482],{"class":74},[68,2865,1149],{"class":107},[68,2867,425],{"class":74},[68,2869,2871,2874,2877,2879],{"class":70,"line":2870},28,[68,2872,2873],{"class":107},"        const",[68,2875,2876],{"class":151}," result",[68,2878,1125],{"class":74},[68,2880,2881],{"class":74}," {}\n",[68,2883,2885,2888,2890,2892,2895,2898,2900,2902,2904,2906],{"class":70,"line":2884},29,[68,2886,2887],{"class":141},"        for",[68,2889,1140],{"class":78},[68,2891,1312],{"class":107},[68,2893,2894],{"class":151}," key",[68,2896,2897],{"class":74}," in",[68,2899,1511],{"class":151},[68,2901,1393],{"class":74},[68,2903,2795],{"class":151},[68,2905,2724],{"class":78},[68,2907,367],{"class":74},[68,2909,2911,2914,2916,2919,2921,2923,2925,2927,2930,2933],{"class":70,"line":2910},30,[68,2912,2913],{"class":141},"          if",[68,2915,1140],{"class":78},[68,2917,2918],{"class":74},"!",[68,2920,2828],{"class":151},[68,2922,1393],{"class":74},[68,2924,2833],{"class":361},[68,2926,364],{"class":78},[68,2928,2929],{"class":151},"key",[68,2931,2932],{"class":78},")) ",[68,2934,367],{"class":74},[68,2936,2938,2941,2943,2945,2947,2949,2951,2953,2955,2957,2959],{"class":70,"line":2937},31,[68,2939,2940],{"class":151},"            result",[68,2942,1711],{"class":78},[68,2944,2929],{"class":151},[68,2946,1717],{"class":78},[68,2948,145],{"class":74},[68,2950,1511],{"class":151},[68,2952,1393],{"class":74},[68,2954,2795],{"class":151},[68,2956,1711],{"class":78},[68,2958,2929],{"class":151},[68,2960,1330],{"class":78},[68,2962,2964],{"class":70,"line":2963},32,[68,2965,2966],{"class":74},"          }\n",[68,2968,2970],{"class":70,"line":2969},33,[68,2971,2972],{"class":74},"        }\n",[68,2974,2976,2978],{"class":70,"line":2975},34,[68,2977,2732],{"class":141},[68,2979,2980],{"class":151}," result\n",[68,2982,2984,2987],{"class":70,"line":2983},35,[68,2985,2986],{"class":74},"      }",[68,2988,447],{"class":78},[68,2990,2992],{"class":70,"line":2991},36,[68,2993,286],{"emptyLinePlaceholder":285},[68,2995,2997,3000],{"class":70,"line":2996},37,[68,2998,2999],{"class":141},"      return",[68,3001,425],{"class":74},[68,3003,3005,3008],{"class":70,"line":3004},38,[68,3006,3007],{"class":151},"        value",[68,3009,387],{"class":74},[68,3011,3013,3016,3018,3020],{"class":70,"line":3012},39,[68,3014,3015],{"class":78},"        props",[68,3017,376],{"class":74},[68,3019,1473],{"class":151},[68,3021,387],{"class":74},[68,3023,3025,3028],{"class":70,"line":3024},40,[68,3026,3027],{"class":151},"        listeners",[68,3029,387],{"class":74},[68,3031,3033,3036],{"class":70,"line":3032},41,[68,3034,3035],{"class":151},"        vuesticSlotKeys",[68,3037,387],{"class":74},[68,3039,3041,3044],{"class":70,"line":3040},42,[68,3042,3043],{"class":151},"        schemaSlots",[68,3045,387],{"class":74},[68,3047,3049,3052],{"class":70,"line":3048},43,[68,3050,3051],{"class":151},"        handleInput",[68,3053,387],{"class":74},[68,3055,3057],{"class":70,"line":3056},44,[68,3058,3059],{"class":74},"      }\n",[68,3061,3063],{"class":70,"line":3062},45,[68,3064,3065],{"class":74},"    },\n",[68,3067,3069,3072],{"class":70,"line":3068},46,[68,3070,3071],{"class":74},"  }",[68,3073,447],{"class":78},[68,3075,3077],{"class":70,"line":3076},47,[68,3078,2727],{"class":74},[16,3080,3082],{"id":3081},"step-11-use-the-extracted-wrapper-function","Step 11: Use the extracted wrapper function",[59,3084,3086],{"className":61,"code":3085,"language":63,"meta":64,"style":64},"\u003Cscript>\nimport { defineVuesticElement } from '.\u002FdefineVuesticElement';\nimport { VaInput } from 'vuestic-ui';\nimport { omit } from '.\u002Fomit';\n\nconst propsToOmit = ['rules', 'label']\nconst props = {\n  ...omit(VaInput.props, propsToOmit)\n}\n\nexport default defineVuesticElement({\n  name: 'VaInputElement',\n  components: [VaInput],\n  props,\n  emits: VaInput.emits,\n  propsToOmit\n})\n\u003C\u002Fscript>\n",[54,3087,3088,3096,3117,3137,3157,3161,3187,3198,3216,3220,3224,3236,3250,3260,3266,3281,3286,3292],{"__ignoreMap":64},[68,3089,3090,3092,3094],{"class":70,"line":71},[68,3091,75],{"class":74},[68,3093,294],{"class":78},[68,3095,82],{"class":74},[68,3097,3098,3100,3102,3104,3106,3108,3110,3113,3115],{"class":70,"line":85},[68,3099,302],{"class":141},[68,3101,305],{"class":74},[68,3103,2480],{"class":151},[68,3105,311],{"class":74},[68,3107,314],{"class":141},[68,3109,317],{"class":74},[68,3111,3112],{"class":192},".\u002FdefineVuesticElement",[68,3114,384],{"class":74},[68,3116,587],{"class":74},[68,3118,3119,3121,3123,3125,3127,3129,3131,3133,3135],{"class":70,"line":96},[68,3120,302],{"class":141},[68,3122,305],{"class":74},[68,3124,333],{"class":151},[68,3126,311],{"class":74},[68,3128,314],{"class":141},[68,3130,317],{"class":74},[68,3132,342],{"class":192},[68,3134,384],{"class":74},[68,3136,587],{"class":74},[68,3138,3139,3141,3143,3145,3147,3149,3151,3153,3155],{"class":70,"line":113},[68,3140,302],{"class":141},[68,3142,305],{"class":74},[68,3144,1273],{"class":151},[68,3146,311],{"class":74},[68,3148,314],{"class":141},[68,3150,317],{"class":74},[68,3152,1282],{"class":192},[68,3154,384],{"class":74},[68,3156,587],{"class":74},[68,3158,3159],{"class":70,"line":124},[68,3160,286],{"emptyLinePlaceholder":285},[68,3162,3163,3165,3167,3169,3171,3173,3175,3177,3179,3181,3183,3185],{"class":70,"line":134},[68,3164,1312],{"class":107},[68,3166,1315],{"class":151},[68,3168,145],{"class":74},[68,3170,1320],{"class":151},[68,3172,384],{"class":74},[68,3174,1325],{"class":192},[68,3176,384],{"class":74},[68,3178,155],{"class":74},[68,3180,317],{"class":74},[68,3182,475],{"class":192},[68,3184,384],{"class":74},[68,3186,1330],{"class":151},[68,3188,3189,3191,3194,3196],{"class":70,"line":178},[68,3190,1312],{"class":107},[68,3192,3193],{"class":151}," props ",[68,3195,145],{"class":74},[68,3197,425],{"class":74},[68,3199,3200,3203,3205,3207,3209,3211,3213],{"class":70,"line":211},[68,3201,3202],{"class":74},"  ...",[68,3204,1387],{"class":361},[68,3206,1390],{"class":151},[68,3208,1393],{"class":74},[68,3210,412],{"class":151},[68,3212,155],{"class":74},[68,3214,3215],{"class":151}," propsToOmit)\n",[68,3217,3218],{"class":70,"line":243},[68,3219,2727],{"class":74},[68,3221,3222],{"class":70,"line":253},[68,3223,286],{"emptyLinePlaceholder":285},[68,3225,3226,3228,3230,3232,3234],{"class":70,"line":262},[68,3227,355],{"class":141},[68,3229,358],{"class":141},[68,3231,2480],{"class":361},[68,3233,364],{"class":151},[68,3235,367],{"class":74},[68,3237,3238,3240,3242,3244,3246,3248],{"class":70,"line":272},[68,3239,373],{"class":78},[68,3241,376],{"class":74},[68,3243,317],{"class":74},[68,3245,381],{"class":192},[68,3247,384],{"class":74},[68,3249,387],{"class":74},[68,3251,3252,3254,3256,3258],{"class":70,"line":282},[68,3253,393],{"class":78},[68,3255,376],{"class":74},[68,3257,398],{"class":151},[68,3259,387],{"class":74},[68,3261,3262,3264],{"class":70,"line":289},[68,3263,1375],{"class":151},[68,3265,387],{"class":74},[68,3267,3268,3271,3273,3275,3277,3279],{"class":70,"line":299},[68,3269,3270],{"class":78},"  emits",[68,3272,376],{"class":74},[68,3274,333],{"class":151},[68,3276,1393],{"class":74},[68,3278,1680],{"class":151},[68,3280,387],{"class":74},[68,3282,3283],{"class":70,"line":326},[68,3284,3285],{"class":151},"  propsToOmit\n",[68,3287,3288,3290],{"class":70,"line":347},[68,3289,444],{"class":74},[68,3291,447],{"class":151},[68,3293,3294,3296,3298],{"class":70,"line":352},[68,3295,275],{"class":74},[68,3297,294],{"class":78},[68,3299,82],{"class":74},[12,3301,3302,3303,3306,3307,3309],{},"Note the ",[54,3304,3305],{},"ref=\"input\""," template ref you can add to ",[54,3308,56],{}," — you can reference it like this:",[59,3311,3313],{"className":61,"code":3312,"language":63,"meta":64,"style":64},"\u003Cscript setup>\nimport { onMounted, ref } from 'vue'\nimport VaInputElement from '.\u002FVaInputElement.vue'\n\nconst form$ = ref(null)\n\nonMounted(() => {\n  console.log(form$.value.el$('custom').input)\n})\n\u003C\u002Fscript>\n",[54,3314,3315,3325,3349,3363,3367,3385,3389,3402,3443,3449],{"__ignoreMap":64},[68,3316,3317,3319,3321,3323],{"class":70,"line":71},[68,3318,75],{"class":74},[68,3320,294],{"class":78},[68,3322,755],{"class":107},[68,3324,82],{"class":74},[68,3326,3327,3329,3331,3334,3336,3339,3341,3343,3345,3347],{"class":70,"line":85},[68,3328,302],{"class":141},[68,3330,305],{"class":74},[68,3332,3333],{"class":151}," onMounted",[68,3335,155],{"class":74},[68,3337,3338],{"class":151}," ref",[68,3340,311],{"class":74},[68,3342,314],{"class":141},[68,3344,317],{"class":74},[68,3346,63],{"class":192},[68,3348,323],{"class":74},[68,3350,3351,3353,3355,3357,3359,3361],{"class":70,"line":96},[68,3352,302],{"class":141},[68,3354,594],{"class":151},[68,3356,531],{"class":141},[68,3358,317],{"class":74},[68,3360,781],{"class":192},[68,3362,323],{"class":74},[68,3364,3365],{"class":70,"line":113},[68,3366,286],{"emptyLinePlaceholder":285},[68,3368,3369,3371,3374,3376,3378,3380,3383],{"class":70,"line":124},[68,3370,1312],{"class":107},[68,3372,3373],{"class":151}," form$ ",[68,3375,145],{"class":74},[68,3377,3338],{"class":361},[68,3379,364],{"class":151},[68,3381,3382],{"class":74},"null",[68,3384,447],{"class":151},[68,3386,3387],{"class":70,"line":134},[68,3388,286],{"emptyLinePlaceholder":285},[68,3390,3391,3394,3396,3398,3400],{"class":70,"line":178},[68,3392,3393],{"class":361},"onMounted",[68,3395,364],{"class":151},[68,3397,1482],{"class":74},[68,3399,1149],{"class":107},[68,3401,425],{"class":74},[68,3403,3404,3407,3409,3412,3414,3417,3419,3421,3423,3425,3427,3429,3432,3434,3436,3438,3441],{"class":70,"line":211},[68,3405,3406],{"class":151},"  console",[68,3408,1393],{"class":74},[68,3410,3411],{"class":361},"log",[68,3413,364],{"class":78},[68,3415,3416],{"class":151},"form$",[68,3418,1393],{"class":74},[68,3420,861],{"class":151},[68,3422,1393],{"class":74},[68,3424,204],{"class":361},[68,3426,364],{"class":78},[68,3428,384],{"class":74},[68,3430,3431],{"class":192},"custom",[68,3433,384],{"class":74},[68,3435,1146],{"class":78},[68,3437,1393],{"class":74},[68,3439,3440],{"class":151},"input",[68,3442,447],{"class":78},[68,3444,3445,3447],{"class":70,"line":243},[68,3446,444],{"class":74},[68,3448,447],{"class":151},[68,3450,3451,3453,3455],{"class":70,"line":253},[68,3452,275],{"class":74},[68,3454,294],{"class":78},[68,3456,82],{"class":74},[16,3458,3460],{"id":3459},"step-12-render-a-form-through-the-schema","Step 12: Render a form through the schema",[59,3462,3464],{"className":61,"code":3463,"language":63,"meta":64,"style":64},"\u003Ctemplate>\n  \u003CVueform :schema=\"schema\" \u002F>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst schema = {\n  MyCustomInput: {\n    type: 'VaInput',\n    rules: \"required|email|min:5\",\n    ['onUpdate:modelValue']: (v) => console.log(v),\n    slots: {\n      appendInner: () => 'appendInner',\n    }\n  }\n}\n\u003C\u002Fscript>\n",[54,3465,3466,3474,3494,3502,3506,3516,3527,3536,3551,3567,3605,3614,3634,3639,3643,3647],{"__ignoreMap":64},[68,3467,3468,3470,3472],{"class":70,"line":71},[68,3469,75],{"class":74},[68,3471,79],{"class":78},[68,3473,82],{"class":74},[68,3475,3476,3478,3480,3483,3485,3487,3490,3492],{"class":70,"line":85},[68,3477,88],{"class":74},[68,3479,703],{"class":78},[68,3481,3482],{"class":107}," :schema",[68,3484,145],{"class":74},[68,3486,148],{"class":74},[68,3488,3489],{"class":192},"schema",[68,3491,148],{"class":74},[68,3493,121],{"class":74},[68,3495,3496,3498,3500],{"class":70,"line":96},[68,3497,275],{"class":74},[68,3499,79],{"class":78},[68,3501,82],{"class":74},[68,3503,3504],{"class":70,"line":113},[68,3505,286],{"emptyLinePlaceholder":285},[68,3507,3508,3510,3512,3514],{"class":70,"line":124},[68,3509,75],{"class":74},[68,3511,294],{"class":78},[68,3513,755],{"class":107},[68,3515,82],{"class":74},[68,3517,3518,3520,3523,3525],{"class":70,"line":134},[68,3519,1312],{"class":107},[68,3521,3522],{"class":151}," schema ",[68,3524,145],{"class":74},[68,3526,425],{"class":74},[68,3528,3529,3532,3534],{"class":70,"line":178},[68,3530,3531],{"class":78},"  MyCustomInput",[68,3533,376],{"class":74},[68,3535,425],{"class":74},[68,3537,3538,3541,3543,3545,3547,3549],{"class":70,"line":211},[68,3539,3540],{"class":78},"    type",[68,3542,376],{"class":74},[68,3544,317],{"class":74},[68,3546,56],{"class":192},[68,3548,384],{"class":74},[68,3550,387],{"class":74},[68,3552,3553,3556,3558,3561,3563,3565],{"class":70,"line":243},[68,3554,3555],{"class":78},"    rules",[68,3557,376],{"class":74},[68,3559,3560],{"class":74}," \"",[68,3562,1606],{"class":192},[68,3564,148],{"class":74},[68,3566,387],{"class":74},[68,3568,3569,3572,3574,3577,3579,3582,3584,3586,3589,3591,3593,3596,3598,3600,3603],{"class":70,"line":253},[68,3570,3571],{"class":78},"    [",[68,3573,384],{"class":74},[68,3575,3576],{"class":78},"onUpdate:modelValue",[68,3578,384],{"class":74},[68,3580,3581],{"class":78},"]",[68,3583,376],{"class":74},[68,3585,1140],{"class":74},[68,3587,3588],{"class":411},"v",[68,3590,1146],{"class":74},[68,3592,1149],{"class":107},[68,3594,3595],{"class":151}," console",[68,3597,1393],{"class":74},[68,3599,3411],{"class":361},[68,3601,3602],{"class":151},"(v)",[68,3604,387],{"class":74},[68,3606,3607,3610,3612],{"class":70,"line":262},[68,3608,3609],{"class":78},"    slots",[68,3611,376],{"class":74},[68,3613,425],{"class":74},[68,3615,3616,3619,3621,3624,3626,3628,3630,3632],{"class":70,"line":272},[68,3617,3618],{"class":361},"      appendInner",[68,3620,376],{"class":74},[68,3622,3623],{"class":74}," ()",[68,3625,1149],{"class":107},[68,3627,317],{"class":74},[68,3629,2358],{"class":192},[68,3631,384],{"class":74},[68,3633,387],{"class":74},[68,3635,3636],{"class":70,"line":282},[68,3637,3638],{"class":74},"    }\n",[68,3640,3641],{"class":70,"line":289},[68,3642,1754],{"class":74},[68,3644,3645],{"class":70,"line":299},[68,3646,2727],{"class":74},[68,3648,3649,3651,3653],{"class":70,"line":326},[68,3650,275],{"class":74},[68,3652,294],{"class":78},[68,3654,82],{"class":74},[12,3656,3657,3658,3660,3661,3663,3664,3666,3667,3669,3670,3673,3674,3676,3677,3680,3681,3684,3685,3687,3688,3691,3692,3695,3696,1393],{},"Bind the ",[54,3659,3489],{}," object via props to ",[54,3662,703],{}," to get the result. The key (",[54,3665,721],{},") matches the mandatory ",[54,3668,796],{}," prop. ",[54,3671,3672],{},"type: 'VaInput'"," is the argument from ",[54,3675,461],{}," (it must always end with ",[54,3678,3679],{},"Element",", which we skip here). ",[54,3682,3683],{},"type"," can be written as PascalCase (",[54,3686,56],{},") or kebab-case (",[54,3689,3690],{},"va-input","). For events, replace the ",[54,3693,3694],{},"@"," character with ",[54,3697,3698],{},"on",[16,3700,3702],{"id":3701},"step-13-define-slots-with-different-methods","Step 13: Define slots with different methods",[12,3704,3705],{},[30,3706,3707],{},"Method 1 — arrow function:",[59,3709,3711],{"className":1661,"code":3710,"language":1663,"meta":64,"style":64},"slots: {\n  appendInner: () => 'appendInner',\n}\n",[54,3712,3713,3722,3741],{"__ignoreMap":64},[68,3714,3715,3718,3720],{"class":70,"line":71},[68,3716,2795],{"class":3717},"sBMFI",[68,3719,376],{"class":74},[68,3721,425],{"class":74},[68,3723,3724,3727,3729,3731,3733,3735,3737,3739],{"class":70,"line":85},[68,3725,3726],{"class":3717},"  appendInner",[68,3728,376],{"class":74},[68,3730,3623],{"class":74},[68,3732,1149],{"class":107},[68,3734,317],{"class":74},[68,3736,2358],{"class":192},[68,3738,384],{"class":74},[68,3740,387],{"class":74},[68,3742,3743],{"class":70,"line":96},[68,3744,2727],{"class":74},[12,3746,3747],{},[30,3748,3749],{},"Method 2 — render() function:",[59,3751,3753],{"className":1661,"code":3752,"language":1663,"meta":64,"style":64},"import { h } from 'vue';\n\nconst schema = {\n  MyCustomInput: {\n    type: 'va-input',\n    slots: {\n      appendInner: {\n        props: ['el$'],\n        render() {\n          console.log(this.el$)\n          return h('div', 'Schema Slot')\n        }\n      }\n    }\n  }\n}\n",[54,3754,3755,3776,3780,3790,3798,3812,3820,3828,3846,3855,3873,3900,3904,3908,3912,3916],{"__ignoreMap":64},[68,3756,3757,3759,3761,3764,3766,3768,3770,3772,3774],{"class":70,"line":71},[68,3758,302],{"class":141},[68,3760,305],{"class":74},[68,3762,3763],{"class":151}," h",[68,3765,311],{"class":74},[68,3767,314],{"class":141},[68,3769,317],{"class":74},[68,3771,63],{"class":192},[68,3773,384],{"class":74},[68,3775,587],{"class":74},[68,3777,3778],{"class":70,"line":85},[68,3779,286],{"emptyLinePlaceholder":285},[68,3781,3782,3784,3786,3788],{"class":70,"line":96},[68,3783,1312],{"class":107},[68,3785,3522],{"class":151},[68,3787,145],{"class":74},[68,3789,425],{"class":74},[68,3791,3792,3794,3796],{"class":70,"line":113},[68,3793,3531],{"class":78},[68,3795,376],{"class":74},[68,3797,425],{"class":74},[68,3799,3800,3802,3804,3806,3808,3810],{"class":70,"line":124},[68,3801,3540],{"class":78},[68,3803,376],{"class":74},[68,3805,317],{"class":74},[68,3807,3690],{"class":192},[68,3809,384],{"class":74},[68,3811,387],{"class":74},[68,3813,3814,3816,3818],{"class":70,"line":134},[68,3815,3609],{"class":78},[68,3817,376],{"class":74},[68,3819,425],{"class":74},[68,3821,3822,3824,3826],{"class":70,"line":178},[68,3823,3618],{"class":78},[68,3825,376],{"class":74},[68,3827,425],{"class":74},[68,3829,3830,3832,3834,3836,3838,3840,3842,3844],{"class":70,"line":211},[68,3831,3015],{"class":78},[68,3833,376],{"class":74},[68,3835,1320],{"class":151},[68,3837,384],{"class":74},[68,3839,204],{"class":192},[68,3841,384],{"class":74},[68,3843,3581],{"class":151},[68,3845,387],{"class":74},[68,3847,3848,3851,3853],{"class":70,"line":243},[68,3849,3850],{"class":78},"        render",[68,3852,1482],{"class":74},[68,3854,425],{"class":74},[68,3856,3857,3860,3862,3864,3866,3869,3871],{"class":70,"line":253},[68,3858,3859],{"class":151},"          console",[68,3861,1393],{"class":74},[68,3863,3411],{"class":361},[68,3865,364],{"class":78},[68,3867,3868],{"class":74},"this.",[68,3870,204],{"class":151},[68,3872,447],{"class":78},[68,3874,3875,3878,3880,3882,3884,3887,3889,3891,3893,3896,3898],{"class":70,"line":262},[68,3876,3877],{"class":141},"          return",[68,3879,3763],{"class":361},[68,3881,364],{"class":78},[68,3883,384],{"class":74},[68,3885,3886],{"class":192},"div",[68,3888,384],{"class":74},[68,3890,155],{"class":74},[68,3892,317],{"class":74},[68,3894,3895],{"class":192},"Schema Slot",[68,3897,384],{"class":74},[68,3899,447],{"class":78},[68,3901,3902],{"class":70,"line":272},[68,3903,2972],{"class":74},[68,3905,3906],{"class":70,"line":282},[68,3907,3059],{"class":74},[68,3909,3910],{"class":70,"line":289},[68,3911,3638],{"class":74},[68,3913,3914],{"class":70,"line":299},[68,3915,1754],{"class":74},[68,3917,3918],{"class":70,"line":326},[68,3919,2727],{"class":74},[12,3921,3922],{},[30,3923,3924],{},"Method 3 — return h():",[59,3926,3928],{"className":1661,"code":3927,"language":1663,"meta":64,"style":64},"import { h } from 'vue';\nimport TestComponent from '.\u002FTestComponent.vue';\n\nconst schema = {\n  MyCustomInput: {\n    type: 'va-input',\n    slots: {\n      appendInner: () => h(TestComponent, {\n        label: 'hello',\n        onSomeEvent: () => console.log('onSomeEvent')\n      }, {\n        icon: () => '👋'\n      })\n    }\n  }\n}\n",[54,3929,3930,3950,3968,3972,3982,3990,4004,4012,4031,4047,4075,4081,4099,4105,4109,4113],{"__ignoreMap":64},[68,3931,3932,3934,3936,3938,3940,3942,3944,3946,3948],{"class":70,"line":71},[68,3933,302],{"class":141},[68,3935,305],{"class":74},[68,3937,3763],{"class":151},[68,3939,311],{"class":74},[68,3941,314],{"class":141},[68,3943,317],{"class":74},[68,3945,63],{"class":192},[68,3947,384],{"class":74},[68,3949,587],{"class":74},[68,3951,3952,3954,3957,3959,3961,3964,3966],{"class":70,"line":85},[68,3953,302],{"class":141},[68,3955,3956],{"class":151}," TestComponent ",[68,3958,531],{"class":141},[68,3960,317],{"class":74},[68,3962,3963],{"class":192},".\u002FTestComponent.vue",[68,3965,384],{"class":74},[68,3967,587],{"class":74},[68,3969,3970],{"class":70,"line":96},[68,3971,286],{"emptyLinePlaceholder":285},[68,3973,3974,3976,3978,3980],{"class":70,"line":113},[68,3975,1312],{"class":107},[68,3977,3522],{"class":151},[68,3979,145],{"class":74},[68,3981,425],{"class":74},[68,3983,3984,3986,3988],{"class":70,"line":124},[68,3985,3531],{"class":78},[68,3987,376],{"class":74},[68,3989,425],{"class":74},[68,3991,3992,3994,3996,3998,4000,4002],{"class":70,"line":134},[68,3993,3540],{"class":78},[68,3995,376],{"class":74},[68,3997,317],{"class":74},[68,3999,3690],{"class":192},[68,4001,384],{"class":74},[68,4003,387],{"class":74},[68,4005,4006,4008,4010],{"class":70,"line":178},[68,4007,3609],{"class":78},[68,4009,376],{"class":74},[68,4011,425],{"class":74},[68,4013,4014,4016,4018,4020,4022,4024,4027,4029],{"class":70,"line":211},[68,4015,3618],{"class":361},[68,4017,376],{"class":74},[68,4019,3623],{"class":74},[68,4021,1149],{"class":107},[68,4023,3763],{"class":361},[68,4025,4026],{"class":151},"(TestComponent",[68,4028,155],{"class":74},[68,4030,425],{"class":74},[68,4032,4033,4036,4038,4040,4043,4045],{"class":70,"line":243},[68,4034,4035],{"class":78},"        label",[68,4037,376],{"class":74},[68,4039,317],{"class":74},[68,4041,4042],{"class":192},"hello",[68,4044,384],{"class":74},[68,4046,387],{"class":74},[68,4048,4049,4052,4054,4056,4058,4060,4062,4064,4066,4068,4071,4073],{"class":70,"line":253},[68,4050,4051],{"class":361},"        onSomeEvent",[68,4053,376],{"class":74},[68,4055,3623],{"class":74},[68,4057,1149],{"class":107},[68,4059,3595],{"class":151},[68,4061,1393],{"class":74},[68,4063,3411],{"class":361},[68,4065,364],{"class":151},[68,4067,384],{"class":74},[68,4069,4070],{"class":192},"onSomeEvent",[68,4072,384],{"class":74},[68,4074,447],{"class":151},[68,4076,4077,4079],{"class":70,"line":262},[68,4078,2739],{"class":74},[68,4080,425],{"class":74},[68,4082,4083,4086,4088,4090,4092,4094,4097],{"class":70,"line":272},[68,4084,4085],{"class":361},"        icon",[68,4087,376],{"class":74},[68,4089,3623],{"class":74},[68,4091,1149],{"class":107},[68,4093,317],{"class":74},[68,4095,4096],{"class":192},"👋",[68,4098,323],{"class":74},[68,4100,4101,4103],{"class":70,"line":282},[68,4102,2986],{"class":74},[68,4104,447],{"class":151},[68,4106,4107],{"class":70,"line":289},[68,4108,3638],{"class":74},[68,4110,4111],{"class":70,"line":299},[68,4112,1754],{"class":74},[68,4114,4115],{"class":70,"line":326},[68,4116,2727],{"class":74},[12,4118,4119,4122],{},[54,4120,4121],{},"h()"," takes a component as the first argument, props and events as the second, and slots as the third.",[16,4124,4126],{"id":4125},"final-thoughts","Final thoughts",[12,4128,4129],{},"In this guide, we walked through building a custom wrapper around Vuestic UI components for use inside Vueform. We covered everything you need for full compatibility:",[24,4131,4132,4135,4138,4144,4147],{},[27,4133,4134],{},"✅ Handling v-model and validation",[27,4136,4137],{},"✅ Passing props with automatic omission",[27,4139,4140,4141,4143],{},"✅ Listening to events using ",[54,4142,1649],{}," for schema support",[27,4145,4146],{},"✅ Managing generic and custom slots without conflicts",[27,4148,4149],{},"✅ Using render functions in schema configuration",[12,4151,4152],{},"This approach gives you the flexibility of Vueform with the design power of Vuestic. If you're working with many components, abstract your wrapper logic for easier maintenance. Happy building! 🚀",[4154,4155],"blog-button",{"label":4156,"to":4157},"Talk to a Vue expert","https:\u002F\u002Fcalendar.app.google\u002FXwRzASZitZRSVLxq6",[4159,4160,4161],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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 .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":64,"searchDepth":96,"depth":96,"links":4163},[4164,4165,4166,4167,4168,4169,4170,4171,4172,4173,4174,4175,4176,4177,4178],{"id":18,"depth":85,"text":19},{"id":48,"depth":85,"text":49},{"id":506,"depth":85,"text":507},{"id":682,"depth":85,"text":683},{"id":800,"depth":85,"text":801},{"id":1211,"depth":85,"text":1212},{"id":1552,"depth":85,"text":1553},{"id":1632,"depth":85,"text":1633},{"id":1847,"depth":85,"text":1848},{"id":2285,"depth":85,"text":2286},{"id":2400,"depth":85,"text":2401},{"id":3081,"depth":85,"text":3082},{"id":3459,"depth":85,"text":3460},{"id":3701,"depth":85,"text":3702},{"id":4125,"depth":85,"text":4126},"2025-03-20","A step-by-step guide to wrapping Vuestic UI components as custom Vueform elements — v-model, validation, props, events, and schema-driven slots.","md",false,"\u002Fimages\u002Fblog\u002Fvueform\u002Fcard.png",{},"\u002Fblog\u002Fvueform",{"title":5,"description":4180},"blog\u002Fvueform",[4189,4190,4191],"Vue.js","Vuestic UI","Forms","pZE1UijKk31USaSOy5qQ6TeKyNQqbsG26WNHJ15E7bs",1784559993390]