[{"data":1,"prerenderedAt":1110},["ShallowReactive",2],{"page-\u002Fnuxt-ui\u002Fformulaires":3,"pieces-nuxt-ui":1067,"autour-\u002Fnuxt-ui\u002Fformulaires":1092,"prerequis-\u002Fnuxt-ui\u002Fformulaires":1097,"plan-nuxt-ui":1099},{"id":4,"title":5,"body":6,"description":1034,"extension":1035,"ligne":1036,"meta":1037,"motsCles":1038,"navigation":111,"niveau":1041,"path":1042,"prerequis":1043,"ressources":1045,"seo":1053,"sources":1054,"stem":1065,"__hash__":1066},"docs\u002Fnuxt-ui\u002F03.formulaires.md","Formulaires et validation",{"type":7,"value":8,"toc":1023},"minimark",[9,14,36,40,44,519,525,529,595,611,615,628,655,664,668,675,730,750,753,759,763,776,823,830,834,837,880,902,906,939,952,964,968,1019],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,30,33],"ul",{},[18,19,20,21,25,26,29],"li",{},"Assembler ",[22,23,24],"code",{},"UForm",", ",[22,27,28],{},"UFormField"," et des champs de saisie.",[18,31,32],{},"Décrire les règles de validation avec un schéma.",[18,34,35],{},"Récupérer les données validées à l'envoi.",[10,37,39],{"id":38},"le-formulaire-complet","Le formulaire complet",[41,42,43],"p",{},"Voici un formulaire d'ajout de recette. Lis-le d'abord, on l'explique ensuite.",[45,46,52],"pre",{"className":47,"code":48,"filename":49,"language":50,"meta":51,"style":51},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup lang=\"ts\">\nimport * as z from 'zod'\n\nconst schema = z.object({\n  titre: z.string().min(3, 'Au moins 3 caractères'),\n  description: z.string().optional()\n})\n\nconst state = reactive({ titre: '', description: '' })\n\nfunction envoyer(event: { data: z.output\u003Ctypeof schema> }) {\n  console.log(event.data)\n}\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"envoyer\">\n    \u003CUFormField label=\"Titre\" name=\"titre\">\n      \u003CUInput v-model=\"state.titre\" \u002F>\n    \u003C\u002FUFormField>\n    \u003CUFormField label=\"Description\" name=\"description\">\n      \u003CUTextarea v-model=\"state.description\" \u002F>\n    \u003C\u002FUFormField>\n    \u003CUButton type=\"submit\" label=\"Enregistrer\" \u002F>\n  \u003C\u002FUForm>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Frecettes\u002Fnouvelle.vue","vue","",[22,53,54,84,106,113,135,164,180,186,191,218,223,266,278,284,294,299,309,362,388,412,422,445,466,475,500,510],{"__ignoreMap":51},[55,56,59,63,67,71,74,77,81],"span",{"class":57,"line":58},"line",1,[55,60,62],{"class":61},"scfrF","\u003C",[55,64,66],{"class":65},"s5JFL","script",[55,68,70],{"class":69},"s5iOY"," setup",[55,72,73],{"class":69}," lang",[55,75,76],{"class":61},"=",[55,78,80],{"class":79},"shWOn","\"ts\"",[55,82,83],{"class":61},">\n",[55,85,87,91,94,97,100,103],{"class":57,"line":86},2,[55,88,90],{"class":89},"sOnC1","import",[55,92,93],{"class":69}," *",[55,95,96],{"class":89}," as",[55,98,99],{"class":61}," z ",[55,101,102],{"class":89},"from",[55,104,105],{"class":79}," 'zod'\n",[55,107,109],{"class":57,"line":108},3,[55,110,112],{"emptyLinePlaceholder":111},true,"\n",[55,114,116,119,122,125,128,132],{"class":57,"line":115},4,[55,117,118],{"class":89},"const",[55,120,121],{"class":69}," schema",[55,123,124],{"class":89}," =",[55,126,127],{"class":61}," z.",[55,129,131],{"class":130},"syCW7","object",[55,133,134],{"class":61},"({\n",[55,136,138,141,144,147,150,153,156,158,161],{"class":57,"line":137},5,[55,139,140],{"class":61},"  titre: z.",[55,142,143],{"class":130},"string",[55,145,146],{"class":61},"().",[55,148,149],{"class":130},"min",[55,151,152],{"class":61},"(",[55,154,155],{"class":69},"3",[55,157,25],{"class":61},[55,159,160],{"class":79},"'Au moins 3 caractères'",[55,162,163],{"class":61},"),\n",[55,165,167,170,172,174,177],{"class":57,"line":166},6,[55,168,169],{"class":61},"  description: z.",[55,171,143],{"class":130},[55,173,146],{"class":61},[55,175,176],{"class":130},"optional",[55,178,179],{"class":61},"()\n",[55,181,183],{"class":57,"line":182},7,[55,184,185],{"class":61},"})\n",[55,187,189],{"class":57,"line":188},8,[55,190,112],{"emptyLinePlaceholder":111},[55,192,194,196,199,201,204,207,210,213,215],{"class":57,"line":193},9,[55,195,118],{"class":89},[55,197,198],{"class":69}," state",[55,200,124],{"class":89},[55,202,203],{"class":130}," reactive",[55,205,206],{"class":61},"({ titre: ",[55,208,209],{"class":79},"''",[55,211,212],{"class":61},", description: ",[55,214,209],{"class":79},[55,216,217],{"class":61}," })\n",[55,219,221],{"class":57,"line":220},10,[55,222,112],{"emptyLinePlaceholder":111},[55,224,226,229,232,234,238,241,244,247,249,252,255,258,260,263],{"class":57,"line":225},11,[55,227,228],{"class":89},"function",[55,230,231],{"class":130}," envoyer",[55,233,152],{"class":61},[55,235,237],{"class":236},"sIXEE","event",[55,239,240],{"class":89},":",[55,242,243],{"class":61}," { ",[55,245,246],{"class":236},"data",[55,248,240],{"class":89},[55,250,251],{"class":236}," z",[55,253,254],{"class":61},".",[55,256,257],{"class":236},"output",[55,259,62],{"class":61},[55,261,262],{"class":89},"typeof",[55,264,265],{"class":61}," schema> }) {\n",[55,267,269,272,275],{"class":57,"line":268},12,[55,270,271],{"class":61},"  console.",[55,273,274],{"class":130},"log",[55,276,277],{"class":61},"(event.data)\n",[55,279,281],{"class":57,"line":280},13,[55,282,283],{"class":61},"}\n",[55,285,287,290,292],{"class":57,"line":286},14,[55,288,289],{"class":61},"\u003C\u002F",[55,291,66],{"class":65},[55,293,83],{"class":61},[55,295,297],{"class":57,"line":296},15,[55,298,112],{"emptyLinePlaceholder":111},[55,300,302,304,307],{"class":57,"line":301},16,[55,303,62],{"class":61},[55,305,306],{"class":65},"template",[55,308,83],{"class":61},[55,310,312,315,317,320,323,325,328,330,332,334,337,339,341,343,345,348,351,353,355,358,360],{"class":57,"line":311},17,[55,313,314],{"class":61},"  \u003C",[55,316,24],{"class":65},[55,318,319],{"class":61}," :",[55,321,322],{"class":69},"schema",[55,324,76],{"class":61},[55,326,327],{"class":61},"\"",[55,329,322],{"class":61},[55,331,327],{"class":61},[55,333,319],{"class":61},[55,335,336],{"class":69},"state",[55,338,76],{"class":61},[55,340,327],{"class":61},[55,342,336],{"class":61},[55,344,327],{"class":61},[55,346,347],{"class":61}," @",[55,349,350],{"class":69},"submit",[55,352,76],{"class":61},[55,354,327],{"class":61},[55,356,357],{"class":61},"envoyer",[55,359,327],{"class":61},[55,361,83],{"class":61},[55,363,365,368,370,373,375,378,381,383,386],{"class":57,"line":364},18,[55,366,367],{"class":61},"    \u003C",[55,369,28],{"class":65},[55,371,372],{"class":69}," label",[55,374,76],{"class":61},[55,376,377],{"class":79},"\"Titre\"",[55,379,380],{"class":69}," name",[55,382,76],{"class":61},[55,384,385],{"class":79},"\"titre\"",[55,387,83],{"class":61},[55,389,391,394,397,400,402,404,407,409],{"class":57,"line":390},19,[55,392,393],{"class":61},"      \u003C",[55,395,396],{"class":65},"UInput",[55,398,399],{"class":69}," v-model",[55,401,76],{"class":61},[55,403,327],{"class":61},[55,405,406],{"class":61},"state.titre",[55,408,327],{"class":61},[55,410,411],{"class":61}," \u002F>\n",[55,413,415,418,420],{"class":57,"line":414},20,[55,416,417],{"class":61},"    \u003C\u002F",[55,419,28],{"class":65},[55,421,83],{"class":61},[55,423,425,427,429,431,433,436,438,440,443],{"class":57,"line":424},21,[55,426,367],{"class":61},[55,428,28],{"class":65},[55,430,372],{"class":69},[55,432,76],{"class":61},[55,434,435],{"class":79},"\"Description\"",[55,437,380],{"class":69},[55,439,76],{"class":61},[55,441,442],{"class":79},"\"description\"",[55,444,83],{"class":61},[55,446,448,450,453,455,457,459,462,464],{"class":57,"line":447},22,[55,449,393],{"class":61},[55,451,452],{"class":65},"UTextarea",[55,454,399],{"class":69},[55,456,76],{"class":61},[55,458,327],{"class":61},[55,460,461],{"class":61},"state.description",[55,463,327],{"class":61},[55,465,411],{"class":61},[55,467,469,471,473],{"class":57,"line":468},23,[55,470,417],{"class":61},[55,472,28],{"class":65},[55,474,83],{"class":61},[55,476,478,480,483,486,488,491,493,495,498],{"class":57,"line":477},24,[55,479,367],{"class":61},[55,481,482],{"class":65},"UButton",[55,484,485],{"class":69}," type",[55,487,76],{"class":61},[55,489,490],{"class":79},"\"submit\"",[55,492,372],{"class":69},[55,494,76],{"class":61},[55,496,497],{"class":79},"\"Enregistrer\"",[55,499,411],{"class":61},[55,501,503,506,508],{"class":57,"line":502},25,[55,504,505],{"class":61},"  \u003C\u002F",[55,507,24],{"class":65},[55,509,83],{"class":61},[55,511,513,515,517],{"class":57,"line":512},26,[55,514,289],{"class":61},[55,516,306],{"class":65},[55,518,83],{"class":61},[41,520,521,522,254],{},"Il faut installer la bibliothèque de validation : ",[22,523,524],{},"npm install zod",[10,526,528],{"id":527},"les-pièces-du-formulaire","Les pièces du formulaire",[530,531,532,545],"table",{},[533,534,535],"thead",{},[536,537,538,542],"tr",{},[539,540,541],"th",{},"Pièce",[539,543,544],{},"Rôle",[546,547,548,558,567,576,585],"tbody",{},[536,549,550,555],{},[551,552,553],"td",{},[22,554,24],{},[551,556,557],{},"Enveloppe le tout, lance la validation et l'envoi",[536,559,560,564],{},[551,561,562],{},[22,563,28],{},[551,565,566],{},"Ajoute le libellé et affiche l'erreur d'un champ",[536,568,569,573],{},[551,570,571],{},[22,572,396],{},[551,574,575],{},"Champ de texte sur une ligne",[536,577,578,582],{},[551,579,580],{},[22,581,452],{},[551,583,584],{},"Champ de texte sur plusieurs lignes",[536,586,587,592],{},[551,588,589],{},[22,590,591],{},"UCheckbox",[551,593,594],{},"Case à cocher",[41,596,597,599,600,603,604,607,608,610],{},[22,598,28],{}," porte un ",[22,601,602],{},"label"," et un ",[22,605,606],{},"name",". Le ",[22,609,606],{}," relie le champ à la clé du schéma : c'est lui qui permet d'afficher le bon message d'erreur au bon endroit.",[10,612,614],{"id":613},"létat-du-formulaire","L'état du formulaire",[41,616,617,619,620,624,625,254],{},[22,618,336],{}," est un objet ",[621,622,623],"strong",{},"réactif"," : quand tu tapes dans un champ, sa valeur change, et inversement. Chaque champ s'y lie avec ",[22,626,627],{},"v-model",[45,629,633],{"className":630,"code":631,"language":632,"meta":51,"style":51},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","const state = reactive({ titre: '', description: '' })\n","ts",[22,634,635],{"__ignoreMap":51},[55,636,637,639,641,643,645,647,649,651,653],{"class":57,"line":58},[55,638,118],{"class":89},[55,640,198],{"class":69},[55,642,124],{"class":89},[55,644,203],{"class":130},[55,646,206],{"class":61},[55,648,209],{"class":79},[55,650,212],{"class":61},[55,652,209],{"class":79},[55,654,217],{"class":61},[41,656,657,660,661,663],{},[22,658,659],{},"reactive"," est fourni par Vue et importé automatiquement par Nuxt. Les clés de ",[22,662,336],{}," doivent porter les mêmes noms que celles du schéma.",[10,665,667],{"id":666},"le-schéma-de-validation","Le schéma de validation",[41,669,670,671,674],{},"Un ",[621,672,673],{},"schéma"," décrit à quoi doit ressembler une donnée correcte. Nuxt UI accepte plusieurs bibliothèques ; l'exemple utilise Zod.",[45,676,678],{"className":630,"code":677,"language":632,"meta":51,"style":51},"const schema = z.object({\n  titre: z.string().min(3, 'Au moins 3 caractères'),\n  description: z.string().optional()\n})\n",[22,679,680,694,714,726],{"__ignoreMap":51},[55,681,682,684,686,688,690,692],{"class":57,"line":58},[55,683,118],{"class":89},[55,685,121],{"class":69},[55,687,124],{"class":89},[55,689,127],{"class":61},[55,691,131],{"class":130},[55,693,134],{"class":61},[55,695,696,698,700,702,704,706,708,710,712],{"class":57,"line":86},[55,697,140],{"class":61},[55,699,143],{"class":130},[55,701,146],{"class":61},[55,703,149],{"class":130},[55,705,152],{"class":61},[55,707,155],{"class":69},[55,709,25],{"class":61},[55,711,160],{"class":79},[55,713,163],{"class":61},[55,715,716,718,720,722,724],{"class":57,"line":108},[55,717,169],{"class":61},[55,719,143],{"class":130},[55,721,146],{"class":61},[55,723,176],{"class":130},[55,725,179],{"class":61},[55,727,728],{"class":57,"line":115},[55,729,185],{"class":61},[15,731,732,738,744],{},[18,733,734,737],{},[22,735,736],{},"z.string()"," exige un texte.",[18,739,740,743],{},[22,741,742],{},".min(3, '...')"," impose une longueur et fixe le message d'erreur.",[18,745,746,749],{},[22,747,748],{},".optional()"," autorise un champ vide.",[41,751,752],{},"Si une règle échoue, le message apparaît sous le champ concerné.",[754,755,756],"note",{},[41,757,758],{},"Nuxt UI valide aussi avec Valibot, Yup, Joi ou Superstruct. Tu choisis la bibliothèque, le principe reste le même.",[10,760,762],{"id":761},"envoyer-les-données","Envoyer les données",[41,764,765,766,769,770,772,773,775],{},"L'événement ",[22,767,768],{},"@submit"," ne se déclenche que si la validation réussit. Il reçoit un objet ",[22,771,237],{}," dont la clé ",[22,774,246],{}," contient les valeurs validées.",[45,777,779],{"className":630,"code":778,"language":632,"meta":51,"style":51},"function envoyer(event: { data: z.output\u003Ctypeof schema> }) {\n  console.log(event.data)\n}\n",[22,780,781,811,819],{"__ignoreMap":51},[55,782,783,785,787,789,791,793,795,797,799,801,803,805,807,809],{"class":57,"line":58},[55,784,228],{"class":89},[55,786,231],{"class":130},[55,788,152],{"class":61},[55,790,237],{"class":236},[55,792,240],{"class":89},[55,794,243],{"class":61},[55,796,246],{"class":236},[55,798,240],{"class":89},[55,800,251],{"class":236},[55,802,254],{"class":61},[55,804,257],{"class":236},[55,806,62],{"class":61},[55,808,262],{"class":89},[55,810,265],{"class":61},[55,812,813,815,817],{"class":57,"line":86},[55,814,271],{"class":61},[55,816,274],{"class":130},[55,818,277],{"class":61},[55,820,821],{"class":57,"line":108},[55,822,283],{"class":61},[41,824,825,826,829],{},"Pour sauvegarder la recette, remplace ",[22,827,828],{},"console.log"," par un appel à une route d'API, comme dans le cours Nuxt sur la récupération des données.",[10,831,833],{"id":832},"valider-plus-finement","Valider plus finement",[41,835,836],{},"Un schéma peut contrôler le format d'un champ. Pour un champ de courriel :",[45,838,840],{"className":630,"code":839,"language":632,"meta":51,"style":51},"const schema = z.object({\n  courriel: z.string().email('Courriel invalide')\n})\n",[22,841,842,856,876],{"__ignoreMap":51},[55,843,844,846,848,850,852,854],{"class":57,"line":58},[55,845,118],{"class":89},[55,847,121],{"class":69},[55,849,124],{"class":89},[55,851,127],{"class":61},[55,853,131],{"class":130},[55,855,134],{"class":61},[55,857,858,861,863,865,868,870,873],{"class":57,"line":86},[55,859,860],{"class":61},"  courriel: z.",[55,862,143],{"class":130},[55,864,146],{"class":61},[55,866,867],{"class":130},"email",[55,869,152],{"class":61},[55,871,872],{"class":79},"'Courriel invalide'",[55,874,875],{"class":61},")\n",[55,877,878],{"class":57,"line":108},[55,879,185],{"class":61},[41,881,882,883,886,887,889,890,893,894,897,898,901],{},"La prop ",[22,884,885],{},"validate-on"," de ",[22,888,24],{}," règle le moment de la validation : à la sortie du champ (",[22,891,892],{},"blur","), à la modification (",[22,895,896],{},"change",") ou à la saisie (",[22,899,900],{},"input",").",[10,903,905],{"id":904},"ajouter-une-case-à-cocher","Ajouter une case à cocher",[45,907,909],{"className":47,"code":908,"language":50,"meta":51,"style":51},"\u003CUFormField name=\"vegetarien\">\n  \u003CUCheckbox v-model=\"state.vegetarien\" label=\"Recette végétarienne\" \u002F>\n\u003C\u002FUFormField>\n",[22,910,911,926,931],{"__ignoreMap":51},[55,912,913,915,917,919,921,924],{"class":57,"line":58},[55,914,62],{"class":61},[55,916,28],{"class":65},[55,918,380],{"class":69},[55,920,76],{"class":61},[55,922,923],{"class":79},"\"vegetarien\"",[55,925,83],{"class":61},[55,927,928],{"class":57,"line":86},[55,929,930],{"class":61},"  \u003CUCheckbox v-model=\"state.vegetarien\" label=\"Recette végétarienne\" \u002F>\n",[55,932,933,935,937],{"class":57,"line":108},[55,934,289],{"class":61},[55,936,28],{"class":65},[55,938,83],{"class":61},[41,940,941,942,945,946,949,950,254],{},"Pense à ajouter ",[22,943,944],{},"vegetarien: z.boolean()"," au schéma et ",[22,947,948],{},"vegetarien: false"," à ",[22,951,336],{},[953,954,955],"tip",{},[41,956,957,958,960,961,963],{},"Mets un ",[22,959,606],{}," sur chaque ",[22,962,28],{},". Sans lui, l'erreur de validation ne s'affiche pas sous le champ.",[10,965,967],{"id":966},"à-retenir","À retenir",[15,969,970,983,996,1011,1014],{},[18,971,972,974,975,603,977,979,980,982],{},[22,973,24],{}," reçoit un ",[22,976,322],{},[22,978,336],{},", et appelle ",[22,981,768],{}," seulement si tout est valide.",[18,984,985,987,988,603,990,992,993,995],{},[22,986,28],{}," donne un ",[22,989,602],{},[22,991,606],{}," ; le ",[22,994,606],{}," reprend la clé du schéma.",[18,997,998,999,1001,1002,1004,1005,25,1007,25,1009,901],{},"Les champs se lient à ",[22,1000,336],{}," avec ",[22,1003,627],{}," (",[22,1006,396],{},[22,1008,452],{},[22,1010,591],{},[18,1012,1013],{},"Le schéma décrit les règles et les messages d'erreur ; Zod est un choix possible parmi d'autres.",[18,1015,1016,775],{},[22,1017,1018],{},"event.data",[1020,1021,1022],"style",{},"html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5JFL, html code.shiki .s5JFL{--shiki-light:#116329;--shiki-default:#7EE787;--shiki-dark:#7EE787}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}html pre.shiki code .shWOn, html code.shiki .shWOn{--shiki-light:#0A3069;--shiki-default:#A5D6FF;--shiki-dark:#A5D6FF}html pre.shiki code .sOnC1, html code.shiki .sOnC1{--shiki-light:#CF222E;--shiki-default:#FF7B72;--shiki-dark:#FF7B72}html pre.shiki code .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}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);}",{"title":51,"searchDepth":86,"depth":108,"links":1024},[1025,1026,1027,1028,1029,1030,1031,1032,1033],{"id":12,"depth":86,"text":13},{"id":38,"depth":86,"text":39},{"id":527,"depth":86,"text":528},{"id":613,"depth":86,"text":614},{"id":666,"depth":86,"text":667},{"id":761,"depth":86,"text":762},{"id":832,"depth":86,"text":833},{"id":904,"depth":86,"text":905},{"id":966,"depth":86,"text":967},"Construire un formulaire d'ajout de recette avec UForm, UFormField, UInput et un schéma de validation Zod.","md","nuxt-ui",{},[24,28,396,452,591,673,1039,1040,336,350],"Zod","validation","debutant","\u002Fnuxt-ui\u002Fformulaires",[1044],"\u002Fnuxt-ui\u002Fpremiers-composants",[1046,1050],{"nom":1047,"url":1048,"type":1049,"anglais":111},"Nuxt UI, Form (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fform","doc",{"nom":1051,"url":1052,"type":1049,"anglais":111},"Nuxt UI, Input (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Finput",{"title":5,"description":1034},[1055,1057,1059,1062],{"nom":1056,"url":1048},"Composant Form (en anglais)",{"nom":1058,"url":1052},"Composant Input (en anglais)",{"nom":1060,"url":1061},"Composant Textarea (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Ftextarea",{"nom":1063,"url":1064},"Composant Checkbox (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fcheckbox","nuxt-ui\u002F03.formulaires","0b7fk9Vjc0sxK50Kp0TG7iCiMh1VypqpdGRn3a109cY",[1068,1072,1075,1076,1080,1084,1088],{"path":1069,"title":1070,"stem":1071},"\u002Fnuxt-ui\u002Finstallation","Installer Nuxt UI","nuxt-ui\u002F01.installation",{"path":1044,"title":1073,"stem":1074},"Premiers composants","nuxt-ui\u002F02.premiers-composants",{"path":1042,"title":5,"stem":1065},{"path":1077,"title":1078,"stem":1079},"\u002Fnuxt-ui\u002Fnavigation-et-superpositions","Navigation et superpositions","nuxt-ui\u002F04.navigation-et-superpositions",{"path":1081,"title":1082,"stem":1083},"\u002Fnuxt-ui\u002Ftheme-et-couleurs","Thème, couleurs et mode sombre","nuxt-ui\u002F05.theme-et-couleurs",{"path":1085,"title":1086,"stem":1087},"\u002Fnuxt-ui\u002Fpersonnaliser-un-composant","Personnaliser un composant","nuxt-ui\u002F06.personnaliser-un-composant",{"path":1089,"title":1090,"stem":1091},"\u002Fnuxt-ui","Nuxt UI","nuxt-ui\u002Findex",[1093,1095],{"title":1073,"path":1044,"stem":1074,"description":1094,"children":-1},"Utiliser UButton, UCard, UBadge et les icônes Lucide pour construire une carte de recette, et régler couleur, variante et taille.",{"title":1078,"path":1077,"stem":1079,"description":1096,"children":-1},"Créer un menu avec UNavigationMenu, ouvrir une fenêtre avec UModal, un menu contextuel avec UDropdownMenu et des notifications avec useToast.",[1098],{"path":1044,"title":1073,"ligne":1036},[1100,1101,1102,1103,1105,1106,1108],{"path":1069,"title":1070,"niveau":1041,"stem":1071},{"path":1044,"title":1073,"niveau":1041,"stem":1074},{"path":1042,"title":5,"niveau":1041,"stem":1065},{"path":1077,"title":1078,"niveau":1104,"stem":1079},"intermediaire",{"path":1081,"title":1082,"niveau":1104,"stem":1083},{"path":1085,"title":1086,"niveau":1107,"stem":1087},"avance",{"path":1089,"title":1090,"niveau":1109,"stem":1091},"memo",1794583445394]