[{"data":1,"prerenderedAt":1190},["ShallowReactive",2],{"page-\u002Fnuxt-ui\u002Fnavigation-et-superpositions":3,"pieces-nuxt-ui":1147,"autour-\u002Fnuxt-ui\u002Fnavigation-et-superpositions":1172,"prerequis-\u002Fnuxt-ui\u002Fnavigation-et-superpositions":1177,"plan-nuxt-ui":1179},{"id":4,"title":5,"body":6,"description":1112,"extension":1113,"ligne":1114,"meta":1115,"motsCles":1116,"navigation":182,"niveau":1119,"path":1120,"prerequis":1121,"ressources":1123,"seo":1134,"sources":1135,"stem":1145,"__hash__":1146},"docs\u002Fnuxt-ui\u002F04.navigation-et-superpositions.md","Navigation et superpositions",{"type":7,"value":8,"toc":1102},"minimark",[9,14,32,36,45,229,244,259,263,273,334,353,364,439,443,453,635,643,647,656,849,856,860,870,989,1000,1010,1014,1028,1037,1041,1098],[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",{},"Construire un menu de navigation à partir d'un tableau.",[18,22,23],{},"Ouvrir une fenêtre modale et un menu déroulant.",[18,25,26,27,31],{},"Afficher une notification avec ",[28,29,30],"code",{},"useToast",".",[10,33,35],{"id":34},"un-menu-de-navigation","Un menu de navigation",[37,38,39,40,44],"p",{},"Un menu se décrit avec des données, pas avec du HTML. Tu fournis un tableau d'éléments, ",[41,42,43],"strong",{},"UNavigationMenu"," s'occupe du reste.",[46,47,53],"pre",{"className":48,"code":49,"filename":50,"language":51,"meta":52,"style":52},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup lang=\"ts\">\nconst items = [\n  { label: 'Accueil', icon: 'i-lucide-house', to: '\u002F' },\n  { label: 'Recettes', icon: 'i-lucide-utensils', to: '\u002Frecettes' },\n  { label: 'À propos', to: '\u002Fa-propos' }\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUNavigationMenu :items=\"items\" \u002F>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FMenuPrincipal.vue","vue","",[28,54,55,85,101,125,145,161,167,177,184,194,220],{"__ignoreMap":52},[56,57,60,64,68,72,75,78,82],"span",{"class":58,"line":59},"line",1,[56,61,63],{"class":62},"scfrF","\u003C",[56,65,67],{"class":66},"s5JFL","script",[56,69,71],{"class":70},"s5iOY"," setup",[56,73,74],{"class":70}," lang",[56,76,77],{"class":62},"=",[56,79,81],{"class":80},"shWOn","\"ts\"",[56,83,84],{"class":62},">\n",[56,86,88,92,95,98],{"class":58,"line":87},2,[56,89,91],{"class":90},"sOnC1","const",[56,93,94],{"class":70}," items",[56,96,97],{"class":90}," =",[56,99,100],{"class":62}," [\n",[56,102,104,107,110,113,116,119,122],{"class":58,"line":103},3,[56,105,106],{"class":62},"  { label: ",[56,108,109],{"class":80},"'Accueil'",[56,111,112],{"class":62},", icon: ",[56,114,115],{"class":80},"'i-lucide-house'",[56,117,118],{"class":62},", to: ",[56,120,121],{"class":80},"'\u002F'",[56,123,124],{"class":62}," },\n",[56,126,128,130,133,135,138,140,143],{"class":58,"line":127},4,[56,129,106],{"class":62},[56,131,132],{"class":80},"'Recettes'",[56,134,112],{"class":62},[56,136,137],{"class":80},"'i-lucide-utensils'",[56,139,118],{"class":62},[56,141,142],{"class":80},"'\u002Frecettes'",[56,144,124],{"class":62},[56,146,148,150,153,155,158],{"class":58,"line":147},5,[56,149,106],{"class":62},[56,151,152],{"class":80},"'À propos'",[56,154,118],{"class":62},[56,156,157],{"class":80},"'\u002Fa-propos'",[56,159,160],{"class":62}," }\n",[56,162,164],{"class":58,"line":163},6,[56,165,166],{"class":62},"]\n",[56,168,170,173,175],{"class":58,"line":169},7,[56,171,172],{"class":62},"\u003C\u002F",[56,174,67],{"class":66},[56,176,84],{"class":62},[56,178,180],{"class":58,"line":179},8,[56,181,183],{"emptyLinePlaceholder":182},true,"\n",[56,185,187,189,192],{"class":58,"line":186},9,[56,188,63],{"class":62},[56,190,191],{"class":66},"template",[56,193,84],{"class":62},[56,195,197,200,202,205,208,210,213,215,217],{"class":58,"line":196},10,[56,198,199],{"class":62},"  \u003C",[56,201,43],{"class":66},[56,203,204],{"class":62}," :",[56,206,207],{"class":70},"items",[56,209,77],{"class":62},[56,211,212],{"class":62},"\"",[56,214,207],{"class":62},[56,216,212],{"class":62},[56,218,219],{"class":62}," \u002F>\n",[56,221,223,225,227],{"class":58,"line":222},11,[56,224,172],{"class":62},[56,226,191],{"class":66},[56,228,84],{"class":62},[37,230,231,232,235,236,239,240,243],{},"Chaque élément a un ",[28,233,234],{},"label",", un ",[28,237,238],{},"to"," et, au choix, une ",[28,241,242],{},"icon",". Le lien de la page courante est mis en évidence.",[37,245,246,247,250,251,254,255,258],{},"La prop ",[28,248,249],{},"orientation"," vaut ",[28,252,253],{},"horizontal"," par défaut. Avec ",[28,256,257],{},"vertical",", le menu devient une colonne, utile dans un menu latéral.",[10,260,262],{"id":261},"une-fenêtre-modale","Une fenêtre modale",[37,264,265,266,269,270,204],{},"Une ",[41,267,268],{},"modale"," est une fenêtre qui passe devant la page et demande une réponse avant de continuer. Voici ",[41,271,272],{},"UModal",[46,274,276],{"className":48,"code":275,"language":51,"meta":52,"style":52},"\u003CUModal title=\"Supprimer la recette\" description=\"Cette action est définitive.\">\n  \u003CUButton label=\"Supprimer\" color=\"error\" \u002F>\n\n  \u003Ctemplate #body>\n    \u003Cp>Tu veux vraiment supprimer « Tarte aux pommes » ?\u003C\u002Fp>\n  \u003C\u002Ftemplate>\n\u003C\u002FUModal>\n",[28,277,278,302,307,311,316,321,326],{"__ignoreMap":52},[56,279,280,282,284,287,289,292,295,297,300],{"class":58,"line":59},[56,281,63],{"class":62},[56,283,272],{"class":66},[56,285,286],{"class":70}," title",[56,288,77],{"class":62},[56,290,291],{"class":80},"\"Supprimer la recette\"",[56,293,294],{"class":70}," description",[56,296,77],{"class":62},[56,298,299],{"class":80},"\"Cette action est définitive.\"",[56,301,84],{"class":62},[56,303,304],{"class":58,"line":87},[56,305,306],{"class":62},"  \u003CUButton label=\"Supprimer\" color=\"error\" \u002F>\n",[56,308,309],{"class":58,"line":103},[56,310,183],{"emptyLinePlaceholder":182},[56,312,313],{"class":58,"line":127},[56,314,315],{"class":62},"  \u003Ctemplate #body>\n",[56,317,318],{"class":58,"line":147},[56,319,320],{"class":62},"    \u003Cp>Tu veux vraiment supprimer « Tarte aux pommes » ?\u003C\u002Fp>\n",[56,322,323],{"class":58,"line":163},[56,324,325],{"class":62},"  \u003C\u002Ftemplate>\n",[56,327,328,330,332],{"class":58,"line":169},[56,329,172],{"class":62},[56,331,272],{"class":66},[56,333,84],{"class":62},[37,335,336,337,340,341,344,345,348,349,352],{},"Le contenu par défaut, ici le bouton, sert de ",[41,338,339],{},"déclencheur"," : un clic l'ouvre. ",[28,342,343],{},"title"," et ",[28,346,347],{},"description"," remplissent l'en-tête. Le slot ",[28,350,351],{},"#body"," contient le corps.",[37,354,355,356,359,360,363],{},"Un pied de page s'ajoute avec ",[28,357,358],{},"#footer",", qui reçoit une fonction ",[28,361,362],{},"close"," pour fermer :",[46,365,367],{"className":48,"code":366,"language":51,"meta":52,"style":52},"\u003Ctemplate #footer=\"{ close }\">\n  \u003CUButton label=\"Annuler\" variant=\"outline\" @click=\"close\" \u002F>\n\u003C\u002Ftemplate>\n",[28,368,369,392,431],{"__ignoreMap":52},[56,370,371,373,375,378,381,383,385,388,390],{"class":58,"line":59},[56,372,63],{"class":62},[56,374,191],{"class":66},[56,376,377],{"class":62}," #",[56,379,380],{"class":70},"footer",[56,382,77],{"class":62},[56,384,212],{"class":62},[56,386,387],{"class":62},"{ close }",[56,389,212],{"class":62},[56,391,84],{"class":62},[56,393,394,396,399,402,404,407,410,412,415,418,421,423,425,427,429],{"class":58,"line":87},[56,395,199],{"class":62},[56,397,398],{"class":66},"UButton",[56,400,401],{"class":70}," label",[56,403,77],{"class":62},[56,405,406],{"class":80},"\"Annuler\"",[56,408,409],{"class":70}," variant",[56,411,77],{"class":62},[56,413,414],{"class":80},"\"outline\"",[56,416,417],{"class":62}," @",[56,419,420],{"class":70},"click",[56,422,77],{"class":62},[56,424,212],{"class":62},[56,426,362],{"class":62},[56,428,212],{"class":62},[56,430,219],{"class":62},[56,432,433,435,437],{"class":58,"line":103},[56,434,172],{"class":62},[56,436,191],{"class":66},[56,438,84],{"class":62},[10,440,442],{"id":441},"piloter-louverture","Piloter l'ouverture",[37,444,445,446,449,450,204],{},"Pour ouvrir la modale depuis ton code, lie sa prop ",[28,447,448],{},"open"," à une variable avec ",[28,451,452],{},"v-model:open",[46,454,456],{"className":48,"code":455,"language":51,"meta":52,"style":52},"\u003Cscript setup lang=\"ts\">\nconst ouverte = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUButton label=\"Nouvelle recette\" @click=\"ouverte = true\" \u002F>\n  \u003CUModal v-model:open=\"ouverte\" title=\"Nouvelle recette\">\n    \u003Ctemplate #body>\n      \u003Cp>Le formulaire viendra ici.\u003C\u002Fp>\n    \u003C\u002Ftemplate>\n  \u003C\u002FUModal>\n\u003C\u002Ftemplate>\n",[28,457,458,474,496,504,508,516,549,580,594,608,617,626],{"__ignoreMap":52},[56,459,460,462,464,466,468,470,472],{"class":58,"line":59},[56,461,63],{"class":62},[56,463,67],{"class":66},[56,465,71],{"class":70},[56,467,74],{"class":70},[56,469,77],{"class":62},[56,471,81],{"class":80},[56,473,84],{"class":62},[56,475,476,478,481,483,487,490,493],{"class":58,"line":87},[56,477,91],{"class":90},[56,479,480],{"class":70}," ouverte",[56,482,97],{"class":90},[56,484,486],{"class":485},"syCW7"," ref",[56,488,489],{"class":62},"(",[56,491,492],{"class":70},"false",[56,494,495],{"class":62},")\n",[56,497,498,500,502],{"class":58,"line":103},[56,499,172],{"class":62},[56,501,67],{"class":66},[56,503,84],{"class":62},[56,505,506],{"class":58,"line":127},[56,507,183],{"emptyLinePlaceholder":182},[56,509,510,512,514],{"class":58,"line":147},[56,511,63],{"class":62},[56,513,191],{"class":66},[56,515,84],{"class":62},[56,517,518,520,522,524,526,529,531,533,535,537,540,542,545,547],{"class":58,"line":163},[56,519,199],{"class":62},[56,521,398],{"class":66},[56,523,401],{"class":70},[56,525,77],{"class":62},[56,527,528],{"class":80},"\"Nouvelle recette\"",[56,530,417],{"class":62},[56,532,420],{"class":70},[56,534,77],{"class":62},[56,536,212],{"class":62},[56,538,539],{"class":62},"ouverte ",[56,541,77],{"class":90},[56,543,544],{"class":70}," true",[56,546,212],{"class":62},[56,548,219],{"class":62},[56,550,551,553,555,558,561,563,565,567,570,572,574,576,578],{"class":58,"line":169},[56,552,199],{"class":62},[56,554,272],{"class":66},[56,556,557],{"class":70}," v-model",[56,559,560],{"class":62},":",[56,562,448],{"class":70},[56,564,77],{"class":62},[56,566,212],{"class":62},[56,568,569],{"class":62},"ouverte",[56,571,212],{"class":62},[56,573,286],{"class":70},[56,575,77],{"class":62},[56,577,528],{"class":80},[56,579,84],{"class":62},[56,581,582,585,587,589,592],{"class":58,"line":179},[56,583,584],{"class":62},"    \u003C",[56,586,191],{"class":66},[56,588,377],{"class":62},[56,590,591],{"class":70},"body",[56,593,84],{"class":62},[56,595,596,599,601,604,606],{"class":58,"line":186},[56,597,598],{"class":62},"      \u003C",[56,600,37],{"class":66},[56,602,603],{"class":62},">Le formulaire viendra ici.\u003C\u002F",[56,605,37],{"class":66},[56,607,84],{"class":62},[56,609,610,613,615],{"class":58,"line":196},[56,611,612],{"class":62},"    \u003C\u002F",[56,614,191],{"class":66},[56,616,84],{"class":62},[56,618,619,622,624],{"class":58,"line":222},[56,620,621],{"class":62},"  \u003C\u002F",[56,623,272],{"class":66},[56,625,84],{"class":62},[56,627,629,631,633],{"class":58,"line":628},12,[56,630,172],{"class":62},[56,632,191],{"class":66},[56,634,84],{"class":62},[37,636,637,250,639,642],{},[28,638,569],{},[28,640,641],{},"true"," quand la fenêtre est visible. Tu peux y glisser le formulaire du cours précédent.",[10,644,646],{"id":645},"un-menu-déroulant","Un menu déroulant",[37,648,649,652,653,655],{},[41,650,651],{},"UDropdownMenu"," affiche une liste d'actions au clic sur un élément. Ses ",[28,654,207],{}," forment un tableau de groupes, chaque groupe étant lui-même un tableau.",[46,657,659],{"className":48,"code":658,"language":51,"meta":52,"style":52},"\u003Cscript setup lang=\"ts\">\nconst items = [\n  [\n    { label: 'Modifier', icon: 'i-lucide-pencil' },\n    { label: 'Dupliquer', icon: 'i-lucide-copy' }\n  ],\n  [\n    { label: 'Supprimer', icon: 'i-lucide-trash', color: 'error' as const }\n  ]\n]\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CUDropdownMenu :items=\"items\">\n    \u003CUButton label=\"Actions\" trailing-icon=\"i-lucide-chevron-down\" \u002F>\n  \u003C\u002FUDropdownMenu>\n\u003C\u002Ftemplate>\n",[28,660,661,677,687,692,707,721,726,730,756,761,765,773,777,786,807,831,840],{"__ignoreMap":52},[56,662,663,665,667,669,671,673,675],{"class":58,"line":59},[56,664,63],{"class":62},[56,666,67],{"class":66},[56,668,71],{"class":70},[56,670,74],{"class":70},[56,672,77],{"class":62},[56,674,81],{"class":80},[56,676,84],{"class":62},[56,678,679,681,683,685],{"class":58,"line":87},[56,680,91],{"class":90},[56,682,94],{"class":70},[56,684,97],{"class":90},[56,686,100],{"class":62},[56,688,689],{"class":58,"line":103},[56,690,691],{"class":62},"  [\n",[56,693,694,697,700,702,705],{"class":58,"line":127},[56,695,696],{"class":62},"    { label: ",[56,698,699],{"class":80},"'Modifier'",[56,701,112],{"class":62},[56,703,704],{"class":80},"'i-lucide-pencil'",[56,706,124],{"class":62},[56,708,709,711,714,716,719],{"class":58,"line":147},[56,710,696],{"class":62},[56,712,713],{"class":80},"'Dupliquer'",[56,715,112],{"class":62},[56,717,718],{"class":80},"'i-lucide-copy'",[56,720,160],{"class":62},[56,722,723],{"class":58,"line":163},[56,724,725],{"class":62},"  ],\n",[56,727,728],{"class":58,"line":169},[56,729,691],{"class":62},[56,731,732,734,737,739,742,745,748,751,754],{"class":58,"line":179},[56,733,696],{"class":62},[56,735,736],{"class":80},"'Supprimer'",[56,738,112],{"class":62},[56,740,741],{"class":80},"'i-lucide-trash'",[56,743,744],{"class":62},", color: ",[56,746,747],{"class":80},"'error'",[56,749,750],{"class":90}," as",[56,752,753],{"class":90}," const",[56,755,160],{"class":62},[56,757,758],{"class":58,"line":186},[56,759,760],{"class":62},"  ]\n",[56,762,763],{"class":58,"line":196},[56,764,166],{"class":62},[56,766,767,769,771],{"class":58,"line":222},[56,768,172],{"class":62},[56,770,67],{"class":66},[56,772,84],{"class":62},[56,774,775],{"class":58,"line":628},[56,776,183],{"emptyLinePlaceholder":182},[56,778,780,782,784],{"class":58,"line":779},13,[56,781,63],{"class":62},[56,783,191],{"class":66},[56,785,84],{"class":62},[56,787,789,791,793,795,797,799,801,803,805],{"class":58,"line":788},14,[56,790,199],{"class":62},[56,792,651],{"class":66},[56,794,204],{"class":62},[56,796,207],{"class":70},[56,798,77],{"class":62},[56,800,212],{"class":62},[56,802,207],{"class":62},[56,804,212],{"class":62},[56,806,84],{"class":62},[56,808,810,812,814,816,818,821,824,826,829],{"class":58,"line":809},15,[56,811,584],{"class":62},[56,813,398],{"class":66},[56,815,401],{"class":70},[56,817,77],{"class":62},[56,819,820],{"class":80},"\"Actions\"",[56,822,823],{"class":70}," trailing-icon",[56,825,77],{"class":62},[56,827,828],{"class":80},"\"i-lucide-chevron-down\"",[56,830,219],{"class":62},[56,832,834,836,838],{"class":58,"line":833},16,[56,835,621],{"class":62},[56,837,651],{"class":66},[56,839,84],{"class":62},[56,841,843,845,847],{"class":58,"line":842},17,[56,844,172],{"class":62},[56,846,191],{"class":66},[56,848,84],{"class":62},[37,850,851,852,855],{},"Un trait sépare les groupes. Le bouton placé dans le composant sert de déclencheur. Pour réagir à un choix, ajoute ",[28,853,854],{},"onSelect"," à l'élément, une fonction appelée au clic.",[10,857,859],{"id":858},"les-notifications","Les notifications",[37,861,862,863,866,867,204],{},"Un ",[41,864,865],{},"toast"," est un court message qui apparaît dans un coin de l'écran puis disparaît. Il s'appelle avec ",[28,868,869],{},"useToast()",[46,871,873],{"className":48,"code":872,"language":51,"meta":52,"style":52},"\u003Cscript setup lang=\"ts\">\nconst toast = useToast()\n\nfunction enregistrer() {\n  toast.add({\n    title: 'Recette enregistrée',\n    description: 'Elle apparaît dans ta liste.',\n    color: 'success',\n    icon: 'i-lucide-circle-check'\n  })\n}\n\u003C\u002Fscript>\n",[28,874,875,891,906,910,921,932,943,953,963,971,976,981],{"__ignoreMap":52},[56,876,877,879,881,883,885,887,889],{"class":58,"line":59},[56,878,63],{"class":62},[56,880,67],{"class":66},[56,882,71],{"class":70},[56,884,74],{"class":70},[56,886,77],{"class":62},[56,888,81],{"class":80},[56,890,84],{"class":62},[56,892,893,895,898,900,903],{"class":58,"line":87},[56,894,91],{"class":90},[56,896,897],{"class":70}," toast",[56,899,97],{"class":90},[56,901,902],{"class":485}," useToast",[56,904,905],{"class":62},"()\n",[56,907,908],{"class":58,"line":103},[56,909,183],{"emptyLinePlaceholder":182},[56,911,912,915,918],{"class":58,"line":127},[56,913,914],{"class":90},"function",[56,916,917],{"class":485}," enregistrer",[56,919,920],{"class":62},"() {\n",[56,922,923,926,929],{"class":58,"line":147},[56,924,925],{"class":62},"  toast.",[56,927,928],{"class":485},"add",[56,930,931],{"class":62},"({\n",[56,933,934,937,940],{"class":58,"line":163},[56,935,936],{"class":62},"    title: ",[56,938,939],{"class":80},"'Recette enregistrée'",[56,941,942],{"class":62},",\n",[56,944,945,948,951],{"class":58,"line":169},[56,946,947],{"class":62},"    description: ",[56,949,950],{"class":80},"'Elle apparaît dans ta liste.'",[56,952,942],{"class":62},[56,954,955,958,961],{"class":58,"line":179},[56,956,957],{"class":62},"    color: ",[56,959,960],{"class":80},"'success'",[56,962,942],{"class":62},[56,964,965,968],{"class":58,"line":186},[56,966,967],{"class":62},"    icon: ",[56,969,970],{"class":80},"'i-lucide-circle-check'\n",[56,972,973],{"class":58,"line":196},[56,974,975],{"class":62},"  })\n",[56,977,978],{"class":58,"line":222},[56,979,980],{"class":62},"}\n",[56,982,983,985,987],{"class":58,"line":628},[56,984,172],{"class":62},[56,986,67],{"class":66},[56,988,84],{"class":62},[37,990,991,992,995,996,999],{},"Le toast reste affiché 5 secondes par défaut. La propriété ",[28,993,994],{},"duration"," change ce délai, et ",[28,997,998],{},"0"," le laisse affiché jusqu'à la fermeture.",[1001,1002,1003],"warning",{},[37,1004,1005,1006,1009],{},"Les toasts ne s'affichent que si l'application est enveloppée dans ",[28,1007,1008],{},"\u003CUApp>",", comme vu dans le premier cours.",[10,1011,1013],{"id":1012},"tout-relier","Tout relier",[37,1015,1016,1017,1020,1021,1024,1025,31],{},"Une suite classique : l'utilisateur ouvre la modale, valide le formulaire, la modale se ferme et un toast confirme. Dans la fonction appelée par ",[28,1018,1019],{},"@submit",", tu mets ",[28,1022,1023],{},"ouverte.value = false"," puis ",[28,1026,1027],{},"toast.add(...)",[1029,1030,1031],"tip",{},[37,1032,1033,1034,31],{},"Les items d'un menu sont des données. Tu peux donc les générer depuis une liste de recettes avec ",[28,1035,1036],{},"map",[10,1038,1040],{"id":1039},"à-retenir","À retenir",[15,1042,1043,1059,1076,1087,1093],{},[18,1044,1045,1047,1048,1050,1051,1053,1054,1053,1056,1058],{},[28,1046,43],{}," se construit à partir d'un tableau ",[28,1049,207],{}," (",[28,1052,234],{},", ",[28,1055,238],{},[28,1057,242],{},").",[18,1060,1061,1063,1064,1053,1066,1068,1069,344,1071,1073,1074,31],{},[28,1062,272],{}," : ",[28,1065,343],{},[28,1067,347],{},", slots ",[28,1070,351],{},[28,1072,358],{},", ouverture pilotée par ",[28,1075,452],{},[18,1077,1078,1080,1081,1083,1084,1086],{},[28,1079,651],{}," reçoit des ",[28,1082,207],{}," en tableau de groupes ; ",[28,1085,854],{}," réagit au choix.",[18,1088,1089,1092],{},[28,1090,1091],{},"useToast().add({...})"," affiche une notification, 5 secondes par défaut.",[18,1094,1095,1096,31],{},"Toasts et modales exigent ",[28,1097,1008],{},[1099,1100,1101],"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 .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 .syCW7, html code.shiki .syCW7{--shiki-light:#8250DF;--shiki-default:#D2A8FF;--shiki-dark:#D2A8FF}",{"title":52,"searchDepth":87,"depth":103,"links":1103},[1104,1105,1106,1107,1108,1109,1110,1111],{"id":12,"depth":87,"text":13},{"id":34,"depth":87,"text":35},{"id":261,"depth":87,"text":262},{"id":441,"depth":87,"text":442},{"id":645,"depth":87,"text":646},{"id":858,"depth":87,"text":859},{"id":1012,"depth":87,"text":1013},{"id":1039,"depth":87,"text":1040},"Créer un menu avec UNavigationMenu, ouvrir une fenêtre avec UModal, un menu contextuel avec UDropdownMenu et des notifications avec useToast.","md","nuxt-ui",{},[43,272,651,30,865,452,207,1117,1118],"superposition","slot","intermediaire","\u002Fnuxt-ui\u002Fnavigation-et-superpositions",[1122],"\u002Fnuxt-ui\u002Fformulaires",[1124,1128,1131],{"nom":1125,"url":1126,"type":1127,"anglais":182},"Nuxt UI, NavigationMenu (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fnavigation-menu","doc",{"nom":1129,"url":1130,"type":1127,"anglais":182},"Nuxt UI, Modal (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fmodal",{"nom":1132,"url":1133,"type":1127,"anglais":182},"Nuxt UI, Toast (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Ftoast",{"title":5,"description":1112},[1136,1138,1140,1143],{"nom":1137,"url":1126},"Composant NavigationMenu (en anglais)",{"nom":1139,"url":1130},"Composant Modal (en anglais)",{"nom":1141,"url":1142},"Composant DropdownMenu (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fdropdown-menu",{"nom":1144,"url":1133},"Composant Toast (en anglais)","nuxt-ui\u002F04.navigation-et-superpositions","12HZccnwWXEZFH9EDpzTuoycXpECBwNGDN53zSL2ZIY",[1148,1152,1156,1159,1160,1164,1168],{"path":1149,"title":1150,"stem":1151},"\u002Fnuxt-ui\u002Finstallation","Installer Nuxt UI","nuxt-ui\u002F01.installation",{"path":1153,"title":1154,"stem":1155},"\u002Fnuxt-ui\u002Fpremiers-composants","Premiers composants","nuxt-ui\u002F02.premiers-composants",{"path":1122,"title":1157,"stem":1158},"Formulaires et validation","nuxt-ui\u002F03.formulaires",{"path":1120,"title":5,"stem":1145},{"path":1161,"title":1162,"stem":1163},"\u002Fnuxt-ui\u002Ftheme-et-couleurs","Thème, couleurs et mode sombre","nuxt-ui\u002F05.theme-et-couleurs",{"path":1165,"title":1166,"stem":1167},"\u002Fnuxt-ui\u002Fpersonnaliser-un-composant","Personnaliser un composant","nuxt-ui\u002F06.personnaliser-un-composant",{"path":1169,"title":1170,"stem":1171},"\u002Fnuxt-ui","Nuxt UI","nuxt-ui\u002Findex",[1173,1175],{"title":1157,"path":1122,"stem":1158,"description":1174,"children":-1},"Construire un formulaire d'ajout de recette avec UForm, UFormField, UInput et un schéma de validation Zod.",{"title":1162,"path":1161,"stem":1163,"description":1176,"children":-1},"Choisir les couleurs sémantiques dans app.config.ts, ajuster le thème dans main.css et gérer le mode sombre avec UColorModeButton.",[1178],{"path":1122,"title":1157,"ligne":1114},[1180,1182,1183,1184,1185,1186,1188],{"path":1149,"title":1150,"niveau":1181,"stem":1151},"debutant",{"path":1153,"title":1154,"niveau":1181,"stem":1155},{"path":1122,"title":1157,"niveau":1181,"stem":1158},{"path":1120,"title":5,"niveau":1119,"stem":1145},{"path":1161,"title":1162,"niveau":1119,"stem":1163},{"path":1165,"title":1166,"niveau":1187,"stem":1167},"avance",{"path":1169,"title":1170,"niveau":1189,"stem":1171},"memo",1794583445615]