[{"data":1,"prerenderedAt":911},["ShallowReactive",2],{"blog-post-/blog/vuelidate-with-nuxt/":3},{"id":4,"title":5,"body":6,"description":888,"extension":889,"meta":890,"navigation":265,"path":906,"seo":907,"sitemap":908,"stem":909,"__hash__":910},"content/blog/vuelidate-with-nuxt.md","Form Validation with Vuelidate in Nuxt 3",{"type":7,"value":8,"toc":881},"minimark",[9,13,17,22,48,55,118,122,139,143,757,761,772,870,874,877],[10,11,5],"h1",{"id":12},"form-validation-with-vuelidate-in-nuxt-3",[14,15,16],"p",{},"This guide covers setting up Vuelidate for form validation in a Nuxt 3 application using Nuxt UI components.",[18,19,21],"h2",{"id":20},"step-1-install-nuxt-ui","Step 1: Install Nuxt UI",[23,24,29],"pre",{"className":25,"code":26,"language":27,"meta":28,"style":28},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @nuxt/ui\n","bash","",[30,31,32],"code",{"__ignoreMap":28},[33,34,37,41,45],"span",{"class":35,"line":36},"line",1,[33,38,40],{"class":39},"sBMFI","npm",[33,42,44],{"class":43},"sfazB"," install",[33,46,47],{"class":43}," @nuxt/ui\n",[14,49,50,51,54],{},"Update ",[30,52,53],{},"nuxt.config.ts",":",[23,56,60],{"className":57,"code":58,"language":59,"meta":28,"style":28},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","export default defineNuxtConfig({\n  modules: ['@nuxt/ui'],\n})\n","ts",[30,61,62,83,109],{"__ignoreMap":28},[33,63,64,68,71,75,79],{"class":35,"line":36},[33,65,67],{"class":66},"s7zQu","export",[33,69,70],{"class":66}," default",[33,72,74],{"class":73},"s2Zo4"," defineNuxtConfig",[33,76,78],{"class":77},"sTEyZ","(",[33,80,82],{"class":81},"sMK4o","{\n",[33,84,86,90,92,95,98,101,103,106],{"class":35,"line":85},2,[33,87,89],{"class":88},"swJcz","  modules",[33,91,54],{"class":81},[33,93,94],{"class":77}," [",[33,96,97],{"class":81},"'",[33,99,100],{"class":43},"@nuxt/ui",[33,102,97],{"class":81},[33,104,105],{"class":77},"]",[33,107,108],{"class":81},",\n",[33,110,112,115],{"class":35,"line":111},3,[33,113,114],{"class":81},"}",[33,116,117],{"class":77},")\n",[18,119,121],{"id":120},"step-2-install-vuelidate","Step 2: Install Vuelidate",[23,123,125],{"className":25,"code":124,"language":27,"meta":28,"style":28},"npm install @vuelidate/core @vuelidate/validators\n",[30,126,127],{"__ignoreMap":28},[33,128,129,131,133,136],{"class":35,"line":36},[33,130,40],{"class":39},[33,132,44],{"class":43},[33,134,135],{"class":43}," @vuelidate/core",[33,137,138],{"class":43}," @vuelidate/validators\n",[18,140,142],{"id":141},"step-3-set-up-validation","Step 3: Set Up Validation",[23,144,148],{"className":145,"code":146,"language":147,"meta":28,"style":28},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup lang=\"ts\">\nimport useVuelidate from '@vuelidate/core'\nimport {\n  helpers,\n  maxLength,\n  minLength,\n  numeric,\n  required,\n} from '@vuelidate/validators'\n\nconst form = reactive({\n  nameSurname: '',\n  phone: '',\n  email: '',\n})\n\nconst rules = {\n  nameSurname: {\n    required: helpers.withMessage('This field is required', required),\n    minLength: minLength(6),\n  },\n  phone: {\n    required: helpers.withMessage('This field is required', required),\n    numeric,\n    minLength: minLength(11),\n    maxLength: maxLength(11),\n  },\n  email: {\n    required: helpers.withMessage('This field is required', required),\n  },\n}\n\nconst v = useVuelidate(rules, form)\n\nfunction validateWithVuelidate() {\n  v.value.$touch()\n  return v.value.$errors.map((error) => ({\n    path: error.$propertyPath,\n    message: error.$message as string,\n  }))\n}\n\nwatch(form, validateWithVuelidate, { deep: true })\n\u003C/script>\n","vue",[30,149,150,178,198,205,213,221,229,237,245,260,267,285,298,310,322,329,334,346,355,389,411,417,426,453,461,479,498,503,512,539,544,550,555,576,581,595,614,655,673,696,705,710,715,747],{"__ignoreMap":28},[33,151,152,155,158,162,165,168,171,173,175],{"class":35,"line":36},[33,153,154],{"class":81},"\u003C",[33,156,157],{"class":88},"script",[33,159,161],{"class":160},"spNyl"," setup",[33,163,164],{"class":160}," lang",[33,166,167],{"class":81},"=",[33,169,170],{"class":81},"\"",[33,172,59],{"class":43},[33,174,170],{"class":81},[33,176,177],{"class":81},">\n",[33,179,180,183,186,189,192,195],{"class":35,"line":85},[33,181,182],{"class":66},"import",[33,184,185],{"class":77}," useVuelidate ",[33,187,188],{"class":66},"from",[33,190,191],{"class":81}," '",[33,193,194],{"class":43},"@vuelidate/core",[33,196,197],{"class":81},"'\n",[33,199,200,202],{"class":35,"line":111},[33,201,182],{"class":66},[33,203,204],{"class":81}," {\n",[33,206,208,211],{"class":35,"line":207},4,[33,209,210],{"class":77},"  helpers",[33,212,108],{"class":81},[33,214,216,219],{"class":35,"line":215},5,[33,217,218],{"class":77},"  maxLength",[33,220,108],{"class":81},[33,222,224,227],{"class":35,"line":223},6,[33,225,226],{"class":77},"  minLength",[33,228,108],{"class":81},[33,230,232,235],{"class":35,"line":231},7,[33,233,234],{"class":77},"  numeric",[33,236,108],{"class":81},[33,238,240,243],{"class":35,"line":239},8,[33,241,242],{"class":77},"  required",[33,244,108],{"class":81},[33,246,248,250,253,255,258],{"class":35,"line":247},9,[33,249,114],{"class":81},[33,251,252],{"class":66}," from",[33,254,191],{"class":81},[33,256,257],{"class":43},"@vuelidate/validators",[33,259,197],{"class":81},[33,261,263],{"class":35,"line":262},10,[33,264,266],{"emptyLinePlaceholder":265},true,"\n",[33,268,270,273,276,278,281,283],{"class":35,"line":269},11,[33,271,272],{"class":160},"const",[33,274,275],{"class":77}," form ",[33,277,167],{"class":81},[33,279,280],{"class":73}," reactive",[33,282,78],{"class":77},[33,284,82],{"class":81},[33,286,288,291,293,296],{"class":35,"line":287},12,[33,289,290],{"class":88},"  nameSurname",[33,292,54],{"class":81},[33,294,295],{"class":81}," ''",[33,297,108],{"class":81},[33,299,301,304,306,308],{"class":35,"line":300},13,[33,302,303],{"class":88},"  phone",[33,305,54],{"class":81},[33,307,295],{"class":81},[33,309,108],{"class":81},[33,311,313,316,318,320],{"class":35,"line":312},14,[33,314,315],{"class":88},"  email",[33,317,54],{"class":81},[33,319,295],{"class":81},[33,321,108],{"class":81},[33,323,325,327],{"class":35,"line":324},15,[33,326,114],{"class":81},[33,328,117],{"class":77},[33,330,332],{"class":35,"line":331},16,[33,333,266],{"emptyLinePlaceholder":265},[33,335,337,339,342,344],{"class":35,"line":336},17,[33,338,272],{"class":160},[33,340,341],{"class":77}," rules ",[33,343,167],{"class":81},[33,345,204],{"class":81},[33,347,349,351,353],{"class":35,"line":348},18,[33,350,290],{"class":88},[33,352,54],{"class":81},[33,354,204],{"class":81},[33,356,358,361,363,366,369,372,374,376,379,381,384,387],{"class":35,"line":357},19,[33,359,360],{"class":88},"    required",[33,362,54],{"class":81},[33,364,365],{"class":77}," helpers",[33,367,368],{"class":81},".",[33,370,371],{"class":73},"withMessage",[33,373,78],{"class":77},[33,375,97],{"class":81},[33,377,378],{"class":43},"This field is required",[33,380,97],{"class":81},[33,382,383],{"class":81},",",[33,385,386],{"class":77}," required)",[33,388,108],{"class":81},[33,390,392,395,397,400,402,406,409],{"class":35,"line":391},20,[33,393,394],{"class":88},"    minLength",[33,396,54],{"class":81},[33,398,399],{"class":73}," minLength",[33,401,78],{"class":77},[33,403,405],{"class":404},"sbssI","6",[33,407,408],{"class":77},")",[33,410,108],{"class":81},[33,412,414],{"class":35,"line":413},21,[33,415,416],{"class":81},"  },\n",[33,418,420,422,424],{"class":35,"line":419},22,[33,421,303],{"class":88},[33,423,54],{"class":81},[33,425,204],{"class":81},[33,427,429,431,433,435,437,439,441,443,445,447,449,451],{"class":35,"line":428},23,[33,430,360],{"class":88},[33,432,54],{"class":81},[33,434,365],{"class":77},[33,436,368],{"class":81},[33,438,371],{"class":73},[33,440,78],{"class":77},[33,442,97],{"class":81},[33,444,378],{"class":43},[33,446,97],{"class":81},[33,448,383],{"class":81},[33,450,386],{"class":77},[33,452,108],{"class":81},[33,454,456,459],{"class":35,"line":455},24,[33,457,458],{"class":77},"    numeric",[33,460,108],{"class":81},[33,462,464,466,468,470,472,475,477],{"class":35,"line":463},25,[33,465,394],{"class":88},[33,467,54],{"class":81},[33,469,399],{"class":73},[33,471,78],{"class":77},[33,473,474],{"class":404},"11",[33,476,408],{"class":77},[33,478,108],{"class":81},[33,480,482,485,487,490,492,494,496],{"class":35,"line":481},26,[33,483,484],{"class":88},"    maxLength",[33,486,54],{"class":81},[33,488,489],{"class":73}," maxLength",[33,491,78],{"class":77},[33,493,474],{"class":404},[33,495,408],{"class":77},[33,497,108],{"class":81},[33,499,501],{"class":35,"line":500},27,[33,502,416],{"class":81},[33,504,506,508,510],{"class":35,"line":505},28,[33,507,315],{"class":88},[33,509,54],{"class":81},[33,511,204],{"class":81},[33,513,515,517,519,521,523,525,527,529,531,533,535,537],{"class":35,"line":514},29,[33,516,360],{"class":88},[33,518,54],{"class":81},[33,520,365],{"class":77},[33,522,368],{"class":81},[33,524,371],{"class":73},[33,526,78],{"class":77},[33,528,97],{"class":81},[33,530,378],{"class":43},[33,532,97],{"class":81},[33,534,383],{"class":81},[33,536,386],{"class":77},[33,538,108],{"class":81},[33,540,542],{"class":35,"line":541},30,[33,543,416],{"class":81},[33,545,547],{"class":35,"line":546},31,[33,548,549],{"class":81},"}\n",[33,551,553],{"class":35,"line":552},32,[33,554,266],{"emptyLinePlaceholder":265},[33,556,558,560,563,565,568,571,573],{"class":35,"line":557},33,[33,559,272],{"class":160},[33,561,562],{"class":77}," v ",[33,564,167],{"class":81},[33,566,567],{"class":73}," useVuelidate",[33,569,570],{"class":77},"(rules",[33,572,383],{"class":81},[33,574,575],{"class":77}," form)\n",[33,577,579],{"class":35,"line":578},34,[33,580,266],{"emptyLinePlaceholder":265},[33,582,584,587,590,593],{"class":35,"line":583},35,[33,585,586],{"class":160},"function",[33,588,589],{"class":73}," validateWithVuelidate",[33,591,592],{"class":81},"()",[33,594,204],{"class":81},[33,596,598,601,603,606,608,611],{"class":35,"line":597},36,[33,599,600],{"class":77},"  v",[33,602,368],{"class":81},[33,604,605],{"class":77},"value",[33,607,368],{"class":81},[33,609,610],{"class":73},"$touch",[33,612,613],{"class":88},"()\n",[33,615,617,620,623,625,627,629,632,634,637,639,641,645,647,650,653],{"class":35,"line":616},37,[33,618,619],{"class":66},"  return",[33,621,622],{"class":77}," v",[33,624,368],{"class":81},[33,626,605],{"class":77},[33,628,368],{"class":81},[33,630,631],{"class":77},"$errors",[33,633,368],{"class":81},[33,635,636],{"class":73},"map",[33,638,78],{"class":88},[33,640,78],{"class":81},[33,642,644],{"class":643},"sHdIc","error",[33,646,408],{"class":81},[33,648,649],{"class":160}," =>",[33,651,652],{"class":88}," (",[33,654,82],{"class":81},[33,656,658,661,663,666,668,671],{"class":35,"line":657},38,[33,659,660],{"class":88},"    path",[33,662,54],{"class":81},[33,664,665],{"class":77}," error",[33,667,368],{"class":81},[33,669,670],{"class":77},"$propertyPath",[33,672,108],{"class":81},[33,674,676,679,681,683,685,688,691,694],{"class":35,"line":675},39,[33,677,678],{"class":88},"    message",[33,680,54],{"class":81},[33,682,665],{"class":77},[33,684,368],{"class":81},[33,686,687],{"class":77},"$message",[33,689,690],{"class":66}," as",[33,692,693],{"class":39}," string",[33,695,108],{"class":81},[33,697,699,702],{"class":35,"line":698},40,[33,700,701],{"class":81},"  }",[33,703,704],{"class":88},"))\n",[33,706,708],{"class":35,"line":707},41,[33,709,549],{"class":81},[33,711,713],{"class":35,"line":712},42,[33,714,266],{"emptyLinePlaceholder":265},[33,716,718,721,724,726,728,730,733,736,738,742,745],{"class":35,"line":717},43,[33,719,720],{"class":73},"watch",[33,722,723],{"class":77},"(form",[33,725,383],{"class":81},[33,727,589],{"class":77},[33,729,383],{"class":81},[33,731,732],{"class":81}," {",[33,734,735],{"class":88}," deep",[33,737,54],{"class":81},[33,739,741],{"class":740},"sfNiH"," true",[33,743,744],{"class":81}," }",[33,746,117],{"class":77},[33,748,750,753,755],{"class":35,"line":749},44,[33,751,752],{"class":81},"\u003C/",[33,754,157],{"class":88},[33,756,177],{"class":81},[18,758,760],{"id":759},"step-4-display-validation-errors","Step 4: Display Validation Errors",[14,762,763,764,767,768,771],{},"Pass the ",[30,765,766],{},"validate"," function to your Nuxt UI ",[30,769,770],{},"UForm"," component:",[23,773,775],{"className":145,"code":774,"language":147,"meta":28,"style":28},"\u003CUForm :validate=\"validateWithVuelidate\" :state=\"form\" @submit=\"onSubmit\">\n  \u003CUFormGroup label=\"Full Name\" name=\"nameSurname\">\n    \u003CUInput v-model=\"form.nameSurname\" />\n  \u003C/UFormGroup>\n  \u003CUFormGroup label=\"Phone\" name=\"phone\">\n    \u003CUInput v-model=\"form.phone\" />\n  \u003C/UFormGroup>\n  \u003CUButton type=\"submit\">Submit\u003C/UButton>\n\u003C/UForm>\n",[30,776,777,828,833,838,843,848,853,857,862],{"__ignoreMap":28},[33,778,779,781,783,786,788,790,792,795,797,799,802,804,806,809,811,814,817,819,821,824,826],{"class":35,"line":36},[33,780,154],{"class":81},[33,782,770],{"class":88},[33,784,785],{"class":81}," :",[33,787,766],{"class":160},[33,789,167],{"class":81},[33,791,170],{"class":81},[33,793,794],{"class":77},"validateWithVuelidate",[33,796,170],{"class":81},[33,798,785],{"class":81},[33,800,801],{"class":160},"state",[33,803,167],{"class":81},[33,805,170],{"class":81},[33,807,808],{"class":77},"form",[33,810,170],{"class":81},[33,812,813],{"class":81}," @",[33,815,816],{"class":160},"submit",[33,818,167],{"class":81},[33,820,170],{"class":81},[33,822,823],{"class":77},"onSubmit",[33,825,170],{"class":81},[33,827,177],{"class":81},[33,829,830],{"class":35,"line":85},[33,831,832],{"class":77},"  \u003CUFormGroup label=\"Full Name\" name=\"nameSurname\">\n",[33,834,835],{"class":35,"line":111},[33,836,837],{"class":77},"    \u003CUInput v-model=\"form.nameSurname\" />\n",[33,839,840],{"class":35,"line":207},[33,841,842],{"class":77},"  \u003C/UFormGroup>\n",[33,844,845],{"class":35,"line":215},[33,846,847],{"class":77},"  \u003CUFormGroup label=\"Phone\" name=\"phone\">\n",[33,849,850],{"class":35,"line":223},[33,851,852],{"class":77},"    \u003CUInput v-model=\"form.phone\" />\n",[33,854,855],{"class":35,"line":231},[33,856,842],{"class":77},[33,858,859],{"class":35,"line":239},[33,860,861],{"class":77},"  \u003CUButton type=\"submit\">Submit\u003C/UButton>\n",[33,863,864,866,868],{"class":35,"line":247},[33,865,752],{"class":81},[33,867,770],{"class":88},[33,869,177],{"class":81},[18,871,873],{"id":872},"conclusion","Conclusion",[14,875,876],{},"Vuelidate integrates seamlessly with Nuxt UI, giving you robust, reactive form validation with minimal boilerplate.",[878,879,880],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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 .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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":28,"searchDepth":85,"depth":85,"links":882},[883,884,885,886,887],{"id":20,"depth":85,"text":21},{"id":120,"depth":85,"text":121},{"id":141,"depth":85,"text":142},{"id":759,"depth":85,"text":760},{"id":872,"depth":85,"text":873},"How to use Vuelidate for form validation in a Nuxt 3 app with Nuxt UI components. Covers installation, validation rules (required, minLength, numeric), and error display.","md",{"author":891,"date":892,"image":893,"category":894,"tags":895,"featured":905,"draft":905},"Aysegul Karadan","2024-02-28T10:00:00.000Z","/img/vuelidate/1.png","Web Development",[896,897,898,899,147,900,901,902,903,904],"vuelidate","nuxt","forms","validation","vuelidate-nuxt3","how-to-use-vuelidate-nuxt","nuxt-form-validation","vuelidate-tutorial","nuxt-ui-vuelidate",false,"/blog/vuelidate-with-nuxt",{"title":5,"description":888},{"loc":906},"blog/vuelidate-with-nuxt","RVQv2IWEhMCI3424iWwG4Wz3Im00eQkTHxiZ6kDHlho",1782986783047]