[{"data":1,"prerenderedAt":1089},["ShallowReactive",2],{"page-\u002Fnuxt-ui\u002Fpremiers-composants":3,"pieces-nuxt-ui":1046,"autour-\u002Fnuxt-ui\u002Fpremiers-composants":1071,"prerequis-\u002Fnuxt-ui\u002Fpremiers-composants":1076,"plan-nuxt-ui":1078},{"id":4,"title":5,"body":6,"description":1013,"extension":208,"ligne":1014,"meta":1015,"motsCles":1016,"navigation":452,"niveau":1018,"path":1019,"prerequis":1020,"ressources":1022,"seo":1033,"sources":1034,"stem":1044,"__hash__":1045},"docs\u002Fnuxt-ui\u002F02.premiers-composants.md","Premiers composants",{"type":7,"value":8,"toc":1003},"minimark",[9,14,27,31,35,80,90,98,210,254,258,261,280,291,360,370,376,380,387,525,531,535,541,575,589,593,618,685,692,696,699,928,933,939,943,999],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,24],"ul",{},[18,19,20],"li",{},"Afficher des boutons, des cartes et des badges avec leurs props principales.",[18,22,23],{},"Ajouter des icônes grâce à la collection Lucide.",[18,25,26],{},"Assembler ces pièces dans une carte de recette.",[10,28,30],{"id":29},"un-bouton","Un bouton",[32,33,34],"p",{},"Voici un bouton qui mène à la liste des recettes :",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003CUButton label=\"Voir les recettes\" to=\"\u002Frecettes\" \u002F>\n","vue","",[43,44,45],"code",{"__ignoreMap":41},[46,47,50,54,58,62,65,69,72,74,77],"span",{"class":48,"line":49},"line",1,[46,51,53],{"class":52},"scfrF","\u003C",[46,55,57],{"class":56},"s5JFL","UButton",[46,59,61],{"class":60},"s5iOY"," label",[46,63,64],{"class":52},"=",[46,66,68],{"class":67},"shWOn","\"Voir les recettes\"",[46,70,71],{"class":60}," to",[46,73,64],{"class":52},[46,75,76],{"class":67},"\"\u002Frecettes\"",[46,78,79],{"class":52}," \u002F>\n",[32,81,82,85,86,89],{},[43,83,84],{},"label"," est le texte. ",[43,87,88],{},"to"," transforme le bouton en lien vers une page du site.",[32,91,92,93,97],{},"Les réglages se passent par des ",[94,95,96],"strong",{},"props",", des attributs qui configurent le composant. Trois comptent surtout :",[99,100,101,117],"table",{},[102,103,104],"thead",{},[105,106,107,111,114],"tr",{},[108,109,110],"th",{},"Prop",[108,112,113],{},"Rôle",[108,115,116],{},"Valeurs",[118,119,120,156,186],"tbody",{},[105,121,122,128,131],{},[123,124,125],"td",{},[43,126,127],{},"color",[123,129,130],{},"La couleur",[123,132,133,136,137,140,141,140,144,140,147,140,150,140,153],{},[43,134,135],{},"primary"," (défaut), ",[43,138,139],{},"secondary",", ",[43,142,143],{},"success",[43,145,146],{},"info",[43,148,149],{},"warning",[43,151,152],{},"error",[43,154,155],{},"neutral",[105,157,158,163,166],{},[123,159,160],{},[43,161,162],{},"variant",[123,164,165],{},"Le style",[123,167,168,136,171,140,174,140,177,140,180,140,183],{},[43,169,170],{},"solid",[43,172,173],{},"outline",[43,175,176],{},"soft",[43,178,179],{},"subtle",[43,181,182],{},"ghost",[43,184,185],{},"link",[105,187,188,193,196],{},[123,189,190],{},[43,191,192],{},"size",[123,194,195],{},"La taille",[123,197,198,199,202,203,140,206,209],{},"de ",[43,200,201],{},"xs"," à ",[43,204,205],{},"xl",[43,207,208],{},"md"," par défaut",[36,211,213],{"className":38,"code":212,"language":40,"meta":41,"style":41},"\u003CUButton label=\"Supprimer\" color=\"error\" variant=\"outline\" size=\"lg\" \u002F>\n",[43,214,215],{"__ignoreMap":41},[46,216,217,219,221,223,225,228,231,233,236,239,241,244,247,249,252],{"class":48,"line":49},[46,218,53],{"class":52},[46,220,57],{"class":56},[46,222,61],{"class":60},[46,224,64],{"class":52},[46,226,227],{"class":67},"\"Supprimer\"",[46,229,230],{"class":60}," color",[46,232,64],{"class":52},[46,234,235],{"class":67},"\"error\"",[46,237,238],{"class":60}," variant",[46,240,64],{"class":52},[46,242,243],{"class":67},"\"outline\"",[46,245,246],{"class":60}," size",[46,248,64],{"class":52},[46,250,251],{"class":67},"\"lg\"",[46,253,79],{"class":52},[10,255,257],{"id":256},"des-icônes","Des icônes",[32,259,260],{},"Les icônes viennent de collections gratuites. Installe celle de Lucide :",[36,262,266],{"className":263,"code":264,"language":265,"meta":41,"style":41},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install @iconify-json\u002Flucide\n","bash",[43,267,268],{"__ignoreMap":41},[46,269,270,274,277],{"class":48,"line":49},[46,271,273],{"class":272},"sIXEE","npm",[46,275,276],{"class":67}," install",[46,278,279],{"class":67}," @iconify-json\u002Flucide\n",[32,281,282,283,286,287,290],{},"Le nom d'une icône suit le modèle ",[43,284,285],{},"i-lucide-\u003Cnom>",". Tu peux l'utiliser seule avec ",[94,288,289],{},"UIcon",", ou dans un bouton :",[36,292,294],{"className":38,"code":293,"language":40,"meta":41,"style":41},"\u003CUIcon name=\"i-lucide-chef-hat\" \u002F>\n\u003CUButton label=\"Ajouter\" icon=\"i-lucide-plus\" \u002F>\n\u003CUButton label=\"Suivant\" trailing-icon=\"i-lucide-arrow-right\" \u002F>\n",[43,295,296,312,336],{"__ignoreMap":41},[46,297,298,300,302,305,307,310],{"class":48,"line":49},[46,299,53],{"class":52},[46,301,289],{"class":56},[46,303,304],{"class":60}," name",[46,306,64],{"class":52},[46,308,309],{"class":67},"\"i-lucide-chef-hat\"",[46,311,79],{"class":52},[46,313,315,317,319,321,323,326,329,331,334],{"class":48,"line":314},2,[46,316,53],{"class":52},[46,318,57],{"class":56},[46,320,61],{"class":60},[46,322,64],{"class":52},[46,324,325],{"class":67},"\"Ajouter\"",[46,327,328],{"class":60}," icon",[46,330,64],{"class":52},[46,332,333],{"class":67},"\"i-lucide-plus\"",[46,335,79],{"class":52},[46,337,339,341,343,345,347,350,353,355,358],{"class":48,"line":338},3,[46,340,53],{"class":52},[46,342,57],{"class":56},[46,344,61],{"class":60},[46,346,64],{"class":52},[46,348,349],{"class":67},"\"Suivant\"",[46,351,352],{"class":60}," trailing-icon",[46,354,64],{"class":52},[46,356,357],{"class":67},"\"i-lucide-arrow-right\"",[46,359,79],{"class":52},[32,361,362,365,366,369],{},[43,363,364],{},"icon"," place l'icône avant le texte, ",[43,367,368],{},"trailing-icon"," après. Le catalogue des noms est sur le site Lucide ou sur Iconify.",[371,372,373],"note",{},[32,374,375],{},"Sans la collection installée, l'icône est cherchée en ligne au premier affichage. Installer le paquet est plus sûr.",[10,377,379],{"id":378},"un-bouton-en-chargement","Un bouton en chargement",[32,381,382,383,386],{},"La prop ",[43,384,385],{},"loading"," affiche un indicateur et empêche de recliquer. Elle suit une variable :",[36,388,390],{"className":38,"code":389,"language":40,"meta":41,"style":41},"\u003Cscript setup lang=\"ts\">\nconst envoi = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUButton label=\"Publier\" :loading=\"envoi\" @click=\"envoi = true\" \u002F>\n\u003C\u002Ftemplate>\n",[43,391,392,413,438,447,454,464,516],{"__ignoreMap":41},[46,393,394,396,399,402,405,407,410],{"class":48,"line":49},[46,395,53],{"class":52},[46,397,398],{"class":56},"script",[46,400,401],{"class":60}," setup",[46,403,404],{"class":60}," lang",[46,406,64],{"class":52},[46,408,409],{"class":67},"\"ts\"",[46,411,412],{"class":52},">\n",[46,414,415,419,422,425,429,432,435],{"class":48,"line":314},[46,416,418],{"class":417},"sOnC1","const",[46,420,421],{"class":60}," envoi",[46,423,424],{"class":417}," =",[46,426,428],{"class":427},"syCW7"," ref",[46,430,431],{"class":52},"(",[46,433,434],{"class":60},"false",[46,436,437],{"class":52},")\n",[46,439,440,443,445],{"class":48,"line":338},[46,441,442],{"class":52},"\u003C\u002F",[46,444,398],{"class":56},[46,446,412],{"class":52},[46,448,450],{"class":48,"line":449},4,[46,451,453],{"emptyLinePlaceholder":452},true,"\n",[46,455,457,459,462],{"class":48,"line":456},5,[46,458,53],{"class":52},[46,460,461],{"class":56},"template",[46,463,412],{"class":52},[46,465,467,470,472,474,476,479,482,484,486,489,492,494,497,500,502,504,507,509,512,514],{"class":48,"line":466},6,[46,468,469],{"class":52},"  \u003C",[46,471,57],{"class":56},[46,473,61],{"class":60},[46,475,64],{"class":52},[46,477,478],{"class":67},"\"Publier\"",[46,480,481],{"class":52}," :",[46,483,385],{"class":60},[46,485,64],{"class":52},[46,487,488],{"class":52},"\"",[46,490,491],{"class":52},"envoi",[46,493,488],{"class":52},[46,495,496],{"class":52}," @",[46,498,499],{"class":60},"click",[46,501,64],{"class":52},[46,503,488],{"class":52},[46,505,506],{"class":52},"envoi ",[46,508,64],{"class":417},[46,510,511],{"class":60}," true",[46,513,488],{"class":52},[46,515,79],{"class":52},[46,517,519,521,523],{"class":48,"line":518},7,[46,520,442],{"class":52},[46,522,461],{"class":56},[46,524,412],{"class":52},[32,526,527,528,530],{},"Les deux-points devant ",[43,529,385],{}," signifient que la valeur est une variable et non un texte.",[10,532,534],{"id":533},"un-badge","Un badge",[32,536,537,540],{},[94,538,539],{},"UBadge"," est une petite étiquette. Elle sert à marquer un état ou une catégorie.",[36,542,544],{"className":38,"code":543,"language":40,"meta":41,"style":41},"\u003CUBadge label=\"Végétarien\" color=\"success\" variant=\"subtle\" \u002F>\n",[43,545,546],{"__ignoreMap":41},[46,547,548,550,552,554,556,559,561,563,566,568,570,573],{"class":48,"line":49},[46,549,53],{"class":52},[46,551,539],{"class":56},[46,553,61],{"class":60},[46,555,64],{"class":52},[46,557,558],{"class":67},"\"Végétarien\"",[46,560,230],{"class":60},[46,562,64],{"class":52},[46,564,565],{"class":67},"\"success\"",[46,567,238],{"class":60},[46,569,64],{"class":52},[46,571,572],{"class":67},"\"subtle\"",[46,574,79],{"class":52},[32,576,577,578,140,580,582,583,585,586,588],{},"Il partage les props ",[43,579,127],{},[43,581,162],{}," et ",[43,584,192],{}," du bouton. La variante ",[43,587,185],{}," n'existe pas pour lui.",[10,590,592],{"id":591},"une-carte","Une carte",[32,594,595,598,599,602,603,606,607,610,611,582,614,617],{},[94,596,597],{},"UCard"," est un conteneur avec trois zones, appelées ",[94,600,601],{},"slots"," : ",[43,604,605],{},"header",", le contenu par défaut et ",[43,608,609],{},"footer",". On les remplit avec ",[43,612,613],{},"#header",[43,615,616],{},"#footer",".",[36,619,621],{"className":38,"code":620,"language":40,"meta":41,"style":41},"\u003CUCard>\n  \u003Ctemplate #header>\n    \u003Ch3>Tarte aux pommes\u003C\u002Fh3>\n  \u003C\u002Ftemplate>\n\n  \u003Cp>Une pâte brisée, des pommes, du beurre.\u003C\u002Fp>\n\n  \u003Ctemplate #footer>\n    \u003CUButton label=\"Lire la recette\" to=\"\u002Frecettes\u002Ftarte-aux-pommes\" \u002F>\n  \u003C\u002Ftemplate>\n\u003C\u002FUCard>\n",[43,622,623,631,636,641,646,650,655,659,665,671,676],{"__ignoreMap":41},[46,624,625,627,629],{"class":48,"line":49},[46,626,53],{"class":52},[46,628,597],{"class":56},[46,630,412],{"class":52},[46,632,633],{"class":48,"line":314},[46,634,635],{"class":52},"  \u003Ctemplate #header>\n",[46,637,638],{"class":48,"line":338},[46,639,640],{"class":52},"    \u003Ch3>Tarte aux pommes\u003C\u002Fh3>\n",[46,642,643],{"class":48,"line":449},[46,644,645],{"class":52},"  \u003C\u002Ftemplate>\n",[46,647,648],{"class":48,"line":456},[46,649,453],{"emptyLinePlaceholder":452},[46,651,652],{"class":48,"line":466},[46,653,654],{"class":52},"  \u003Cp>Une pâte brisée, des pommes, du beurre.\u003C\u002Fp>\n",[46,656,657],{"class":48,"line":518},[46,658,453],{"emptyLinePlaceholder":452},[46,660,662],{"class":48,"line":661},8,[46,663,664],{"class":52},"  \u003Ctemplate #footer>\n",[46,666,668],{"class":48,"line":667},9,[46,669,670],{"class":52},"    \u003CUButton label=\"Lire la recette\" to=\"\u002Frecettes\u002Ftarte-aux-pommes\" \u002F>\n",[46,672,674],{"class":48,"line":673},10,[46,675,645],{"class":52},[46,677,679,681,683],{"class":48,"line":678},11,[46,680,442],{"class":52},[46,682,597],{"class":56},[46,684,412],{"class":52},[32,686,687,688,691],{},"Le contenu hors ",[43,689,690],{},"\u003Ctemplate>"," va dans la zone centrale.",[10,693,695],{"id":694},"assembler-une-carte-de-recette","Assembler une carte de recette",[32,697,698],{},"Mets le tout dans un composant réutilisable :",[36,700,703],{"className":38,"code":701,"filename":702,"language":40,"meta":41,"style":41},"\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{ titre: string, duree: number }>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUCard>\n    \u003Ctemplate #header>\n      \u003Ch3>{{ titre }}\u003C\u002Fh3>\n      \u003CUBadge label=\"Dessert\" variant=\"soft\" \u002F>\n    \u003C\u002Ftemplate>\n    \u003Cp>\u003CUIcon name=\"i-lucide-clock\" \u002F> {{ duree }} minutes\u003C\u002Fp>\n    \u003Ctemplate #footer>\n      \u003CUButton label=\"Lire\" icon=\"i-lucide-book-open\" \u002F>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUCard>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FRecetteCarte.vue",[43,704,705,721,751,759,763,771,779,793,808,830,839,864,877,900,909,919],{"__ignoreMap":41},[46,706,707,709,711,713,715,717,719],{"class":48,"line":49},[46,708,53],{"class":52},[46,710,398],{"class":56},[46,712,401],{"class":60},[46,714,404],{"class":60},[46,716,64],{"class":52},[46,718,409],{"class":67},[46,720,412],{"class":52},[46,722,723,726,729,732,735,738,740,743,745,748],{"class":48,"line":314},[46,724,725],{"class":427},"defineProps",[46,727,728],{"class":52},"\u003C{ ",[46,730,731],{"class":272},"titre",[46,733,734],{"class":417},":",[46,736,737],{"class":60}," string",[46,739,140],{"class":52},[46,741,742],{"class":272},"duree",[46,744,734],{"class":417},[46,746,747],{"class":60}," number",[46,749,750],{"class":52}," }>()\n",[46,752,753,755,757],{"class":48,"line":338},[46,754,442],{"class":52},[46,756,398],{"class":56},[46,758,412],{"class":52},[46,760,761],{"class":48,"line":449},[46,762,453],{"emptyLinePlaceholder":452},[46,764,765,767,769],{"class":48,"line":456},[46,766,53],{"class":52},[46,768,461],{"class":56},[46,770,412],{"class":52},[46,772,773,775,777],{"class":48,"line":466},[46,774,469],{"class":52},[46,776,597],{"class":56},[46,778,412],{"class":52},[46,780,781,784,786,789,791],{"class":48,"line":518},[46,782,783],{"class":52},"    \u003C",[46,785,461],{"class":56},[46,787,788],{"class":52}," #",[46,790,605],{"class":60},[46,792,412],{"class":52},[46,794,795,798,801,804,806],{"class":48,"line":661},[46,796,797],{"class":52},"      \u003C",[46,799,800],{"class":56},"h3",[46,802,803],{"class":52},">{{ titre }}\u003C\u002F",[46,805,800],{"class":56},[46,807,412],{"class":52},[46,809,810,812,814,816,818,821,823,825,828],{"class":48,"line":667},[46,811,797],{"class":52},[46,813,539],{"class":56},[46,815,61],{"class":60},[46,817,64],{"class":52},[46,819,820],{"class":67},"\"Dessert\"",[46,822,238],{"class":60},[46,824,64],{"class":52},[46,826,827],{"class":67},"\"soft\"",[46,829,79],{"class":52},[46,831,832,835,837],{"class":48,"line":673},[46,833,834],{"class":52},"    \u003C\u002F",[46,836,461],{"class":56},[46,838,412],{"class":52},[46,840,841,843,845,848,850,852,854,857,860,862],{"class":48,"line":678},[46,842,783],{"class":52},[46,844,32],{"class":56},[46,846,847],{"class":52},">\u003C",[46,849,289],{"class":56},[46,851,304],{"class":60},[46,853,64],{"class":52},[46,855,856],{"class":67},"\"i-lucide-clock\"",[46,858,859],{"class":52}," \u002F> {{ duree }} minutes\u003C\u002F",[46,861,32],{"class":56},[46,863,412],{"class":52},[46,865,867,869,871,873,875],{"class":48,"line":866},12,[46,868,783],{"class":52},[46,870,461],{"class":56},[46,872,788],{"class":52},[46,874,609],{"class":60},[46,876,412],{"class":52},[46,878,880,882,884,886,888,891,893,895,898],{"class":48,"line":879},13,[46,881,797],{"class":52},[46,883,57],{"class":56},[46,885,61],{"class":60},[46,887,64],{"class":52},[46,889,890],{"class":67},"\"Lire\"",[46,892,328],{"class":60},[46,894,64],{"class":52},[46,896,897],{"class":67},"\"i-lucide-book-open\"",[46,899,79],{"class":52},[46,901,903,905,907],{"class":48,"line":902},14,[46,904,834],{"class":52},[46,906,461],{"class":56},[46,908,412],{"class":52},[46,910,912,915,917],{"class":48,"line":911},15,[46,913,914],{"class":52},"  \u003C\u002F",[46,916,597],{"class":56},[46,918,412],{"class":52},[46,920,922,924,926],{"class":48,"line":921},16,[46,923,442],{"class":52},[46,925,461],{"class":56},[46,927,412],{"class":52},[32,929,930,932],{},[43,931,725],{}," déclare ce que la carte reçoit, comme dans le cours sur les composants Nuxt.",[934,935,936],"tip",{},[32,937,938],{},"Nuxt UI propose de nombreux composants. Avant d'écrire du HTML à la main, cherche si l'un d'eux existe.",[10,940,942],{"id":941},"à-retenir","À retenir",[15,944,945,962,967,976,989],{},[18,946,947,949,950,140,952,140,954,140,956,140,958,582,960,617],{},[43,948,57],{}," se règle avec ",[43,951,84],{},[43,953,127],{},[43,955,162],{},[43,957,192],{},[43,959,364],{},[43,961,88],{},[18,963,964,966],{},[43,965,385],{}," affiche un état d'attente sur un bouton.",[18,968,969,970,972,973,617],{},"Les icônes s'écrivent ",[43,971,285],{}," après ",[43,974,975],{},"npm install @iconify-json\u002Flucide",[18,977,978,980,981,983,984,986,987,617],{},[43,979,539],{}," marque un état ; ",[43,982,597],{}," offre les slots ",[43,985,605],{},", centre et ",[43,988,609],{},[18,990,991,992,140,994,582,996,998],{},"Les mêmes props ",[43,993,127],{},[43,995,162],{},[43,997,192],{}," reviennent sur la plupart des composants.",[1000,1001,1002],"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 .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 .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}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}",{"title":41,"searchDepth":314,"depth":338,"links":1004},[1005,1006,1007,1008,1009,1010,1011,1012],{"id":12,"depth":314,"text":13},{"id":29,"depth":314,"text":30},{"id":256,"depth":314,"text":257},{"id":378,"depth":314,"text":379},{"id":533,"depth":314,"text":534},{"id":591,"depth":314,"text":592},{"id":694,"depth":314,"text":695},{"id":941,"depth":314,"text":942},"Utiliser UButton, UCard, UBadge et les icônes Lucide pour construire une carte de recette, et régler couleur, variante et taille.","nuxt-ui",{},[57,597,539,289,96,601,162,127,192,1017],"Lucide","debutant","\u002Fnuxt-ui\u002Fpremiers-composants",[1021],"\u002Fnuxt-ui\u002Finstallation",[1023,1027,1030],{"nom":1024,"url":1025,"type":1026,"anglais":452},"Nuxt UI, Button (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fbutton","doc",{"nom":1028,"url":1029,"type":1026,"anglais":452},"Nuxt UI, Card (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fcard",{"nom":1031,"url":1032,"type":1026,"anglais":452},"Nuxt UI, icônes (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Fintegrations\u002Ficons\u002Fnuxt",{"title":5,"description":1013},[1035,1037,1039,1042],{"nom":1036,"url":1025},"Composant Button (en anglais)",{"nom":1038,"url":1029},"Composant Card (en anglais)",{"nom":1040,"url":1041},"Composant Badge (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fbadge",{"nom":1043,"url":1032},"Icônes avec Nuxt (en anglais)","nuxt-ui\u002F02.premiers-composants","b7bjETLzllydRMOlA2ajS5WXK2aptoNnZkLfdOok8x8",[1047,1050,1051,1055,1059,1063,1067],{"path":1021,"title":1048,"stem":1049},"Installer Nuxt UI","nuxt-ui\u002F01.installation",{"path":1019,"title":5,"stem":1044},{"path":1052,"title":1053,"stem":1054},"\u002Fnuxt-ui\u002Fformulaires","Formulaires et validation","nuxt-ui\u002F03.formulaires",{"path":1056,"title":1057,"stem":1058},"\u002Fnuxt-ui\u002Fnavigation-et-superpositions","Navigation et superpositions","nuxt-ui\u002F04.navigation-et-superpositions",{"path":1060,"title":1061,"stem":1062},"\u002Fnuxt-ui\u002Ftheme-et-couleurs","Thème, couleurs et mode sombre","nuxt-ui\u002F05.theme-et-couleurs",{"path":1064,"title":1065,"stem":1066},"\u002Fnuxt-ui\u002Fpersonnaliser-un-composant","Personnaliser un composant","nuxt-ui\u002F06.personnaliser-un-composant",{"path":1068,"title":1069,"stem":1070},"\u002Fnuxt-ui","Nuxt UI","nuxt-ui\u002Findex",[1072,1074],{"title":1048,"path":1021,"stem":1049,"description":1073,"children":-1},"Ajouter le module @nuxt\u002Fui à un projet Nuxt 4, importer Tailwind CSS 4 et envelopper l'application dans UApp.",{"title":1053,"path":1052,"stem":1054,"description":1075,"children":-1},"Construire un formulaire d'ajout de recette avec UForm, UFormField, UInput et un schéma de validation Zod.",[1077],{"path":1021,"title":1048,"ligne":1014},[1079,1080,1081,1082,1084,1085,1087],{"path":1021,"title":1048,"niveau":1018,"stem":1049},{"path":1019,"title":5,"niveau":1018,"stem":1044},{"path":1052,"title":1053,"niveau":1018,"stem":1054},{"path":1056,"title":1057,"niveau":1083,"stem":1058},"intermediaire",{"path":1060,"title":1061,"niveau":1083,"stem":1062},{"path":1064,"title":1065,"niveau":1086,"stem":1066},"avance",{"path":1068,"title":1069,"niveau":1088,"stem":1070},"memo",1794583445278]