[{"data":1,"prerenderedAt":716},["ShallowReactive",2],{"page-\u002Fnuxt-ui":3,"pieces-nuxt-ui":687,"autour-\u002Fnuxt-ui":701,"prerequis-\u002Fnuxt-ui":704,"plan-nuxt-ui":705},{"id":4,"title":5,"body":6,"description":664,"extension":665,"ligne":666,"meta":667,"motsCles":668,"navigation":676,"niveau":677,"path":678,"prerequis":679,"ressources":679,"seo":680,"sources":681,"stem":685,"__hash__":686},"docs\u002Fnuxt-ui\u002Findex.md","Nuxt UI",{"type":7,"value":8,"toc":655},"minimark",[9,13,18,47,105,133,154,158,253,257,334,344,348,443,456,460,514,520,524,562,588,594,598,645,651],[10,11,12],"p",{},"Ce mémo résume Nuxt UI 4. Chaque section renvoie au cours qui l'explique en détail.",[14,15,17],"h2",{"id":16},"installation","Installation",[19,20,25],"pre",{"className":21,"code":22,"language":23,"meta":24,"style":24},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install @nuxt\u002Fui tailwindcss\n","bash","",[26,27,28],"code",{"__ignoreMap":24},[29,30,33,37,41,44],"span",{"class":31,"line":32},"line",1,[29,34,36],{"class":35},"sIXEE","npm",[29,38,40],{"class":39},"shWOn"," install",[29,42,43],{"class":39}," @nuxt\u002Fui",[29,45,46],{"class":39}," tailwindcss\n",[19,48,53],{"className":49,"code":50,"filename":51,"language":52,"meta":24,"style":24},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","export default defineNuxtConfig({\n  modules: ['@nuxt\u002Fui'],\n  css: ['~\u002Fassets\u002Fcss\u002Fmain.css']\n})\n","nuxt.config.ts","ts",[26,54,55,71,87,99],{"__ignoreMap":24},[29,56,57,61,64,68],{"class":31,"line":32},[29,58,60],{"class":59},"sOnC1","export",[29,62,63],{"class":59}," default",[29,65,67],{"class":66},"syCW7"," defineNuxtConfig",[29,69,70],{"class":35},"({\n",[29,72,74,78,81,84],{"class":31,"line":73},2,[29,75,77],{"class":76},"scfrF","  modules: [",[29,79,80],{"class":39},"'@nuxt\u002Fui'",[29,82,83],{"class":76},"]",[29,85,86],{"class":35},",\n",[29,88,90,93,96],{"class":31,"line":89},3,[29,91,92],{"class":76},"  css: [",[29,94,95],{"class":39},"'~\u002Fassets\u002Fcss\u002Fmain.css'",[29,97,98],{"class":76},"]\n",[29,100,102],{"class":31,"line":101},4,[29,103,104],{"class":35},"})\n",[19,106,111],{"className":107,"code":108,"filename":109,"language":110,"meta":24,"style":24},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n","app\u002Fassets\u002Fcss\u002Fmain.css","css",[26,112,113,124],{"__ignoreMap":24},[29,114,115,118,121],{"class":31,"line":32},[29,116,117],{"class":59},"@import",[29,119,120],{"class":39}," \"tailwindcss\"",[29,122,123],{"class":76},";\n",[29,125,126,128,131],{"class":31,"line":73},[29,127,117],{"class":59},[29,129,130],{"class":39}," \"@nuxt\u002Fui\"",[29,132,123],{"class":76},[10,134,135,136,139,140,143,144,147,148,153],{},"Et ",[26,137,138],{},"\u003CUApp>"," autour de ",[26,141,142],{},"\u003CNuxtPage \u002F>"," dans ",[26,145,146],{},"app\u002Fapp.vue",". Détails : ",[149,150,152],"a",{"href":151},"\u002Fnuxt-ui\u002Finstallation","Installer Nuxt UI",".",[14,155,157],{"id":156},"props-communes","Props communes",[159,160,161,174],"table",{},[162,163,164],"thead",{},[165,166,167,171],"tr",{},[168,169,170],"th",{},"Prop",[168,172,173],{},"Valeurs",[175,176,177,209,237],"tbody",{},[165,178,179,185],{},[180,181,182],"td",{},[26,183,184],{},"color",[180,186,187,190,191,190,194,190,197,190,200,190,203,190,206],{},[26,188,189],{},"primary",", ",[26,192,193],{},"secondary",[26,195,196],{},"success",[26,198,199],{},"info",[26,201,202],{},"warning",[26,204,205],{},"error",[26,207,208],{},"neutral",[165,210,211,217],{},[180,212,213,216],{},[26,214,215],{},"variant"," (UButton)",[180,218,219,190,222,190,225,190,228,190,231,190,234],{},[26,220,221],{},"solid",[26,223,224],{},"outline",[26,226,227],{},"soft",[26,229,230],{},"subtle",[26,232,233],{},"ghost",[26,235,236],{},"link",[165,238,239,244],{},[180,240,241],{},[26,242,243],{},"size",[180,245,246,249,250],{},[26,247,248],{},"xs"," à ",[26,251,252],{},"xl",[14,254,256],{"id":255},"composants-courants","Composants courants",[159,258,259,269],{},[162,260,261],{},[165,262,263,266],{},[168,264,265],{},"Composant",[168,267,268],{},"Usage",[175,270,271,294,304,321],{},[165,272,273,278],{},[180,274,275],{},[26,276,277],{},"UButton",[180,279,280,281,190,284,190,287,190,290,293],{},"Bouton ou lien (",[26,282,283],{},"label",[26,285,286],{},"to",[26,288,289],{},"icon",[26,291,292],{},"loading",")",[165,295,296,301],{},[180,297,298],{},[26,299,300],{},"UBadge",[180,302,303],{},"Étiquette",[165,305,306,311],{},[180,307,308],{},[26,309,310],{},"UCard",[180,312,313,314,317,318,293],{},"Carte (slots ",[26,315,316],{},"header",", centre, ",[26,319,320],{},"footer",[165,322,323,328],{},[180,324,325],{},[26,326,327],{},"UIcon",[180,329,330,331],{},"Icône ",[26,332,333],{},"i-lucide-\u003Cnom>",[10,335,336,337,147,340,153],{},"Les icônes demandent ",[26,338,339],{},"npm install @iconify-json\u002Flucide",[149,341,343],{"href":342},"\u002Fnuxt-ui\u002Fpremiers-composants","Premiers composants",[14,345,347],{"id":346},"formulaires","Formulaires",[19,349,353],{"className":350,"code":351,"language":352,"meta":24,"style":24},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003CUForm :schema=\"schema\" :state=\"state\" @submit=\"envoyer\">\n  \u003CUFormField label=\"Titre\" name=\"titre\">\n    \u003CUInput v-model=\"state.titre\" \u002F>\n  \u003C\u002FUFormField>\n  \u003CUButton type=\"submit\" label=\"Enregistrer\" \u002F>\n\u003C\u002FUForm>\n","vue",[26,354,355,412,417,422,427,433],{"__ignoreMap":24},[29,356,357,360,364,367,371,374,377,379,381,383,386,388,390,392,394,397,400,402,404,407,409],{"class":31,"line":32},[29,358,359],{"class":76},"\u003C",[29,361,363],{"class":362},"s5JFL","UForm",[29,365,366],{"class":76}," :",[29,368,370],{"class":369},"s5iOY","schema",[29,372,373],{"class":76},"=",[29,375,376],{"class":76},"\"",[29,378,370],{"class":76},[29,380,376],{"class":76},[29,382,366],{"class":76},[29,384,385],{"class":369},"state",[29,387,373],{"class":76},[29,389,376],{"class":76},[29,391,385],{"class":76},[29,393,376],{"class":76},[29,395,396],{"class":76}," @",[29,398,399],{"class":369},"submit",[29,401,373],{"class":76},[29,403,376],{"class":76},[29,405,406],{"class":76},"envoyer",[29,408,376],{"class":76},[29,410,411],{"class":76},">\n",[29,413,414],{"class":31,"line":73},[29,415,416],{"class":76},"  \u003CUFormField label=\"Titre\" name=\"titre\">\n",[29,418,419],{"class":31,"line":89},[29,420,421],{"class":76},"    \u003CUInput v-model=\"state.titre\" \u002F>\n",[29,423,424],{"class":31,"line":101},[29,425,426],{"class":76},"  \u003C\u002FUFormField>\n",[29,428,430],{"class":31,"line":429},5,[29,431,432],{"class":76},"  \u003CUButton type=\"submit\" label=\"Enregistrer\" \u002F>\n",[29,434,436,439,441],{"class":31,"line":435},6,[29,437,438],{"class":76},"\u003C\u002F",[29,440,363],{"class":362},[29,442,411],{"class":76},[10,444,445,447,448,451,452,153],{},[26,446,370],{}," vient de Zod, Valibot, Yup, Joi ou Superstruct ; ",[26,449,450],{},"event.data"," contient les valeurs validées. Détails : ",[149,453,455],{"href":454},"\u002Fnuxt-ui\u002Fformulaires","Formulaires et validation",[14,457,459],{"id":458},"navigation-et-superpositions","Navigation et superpositions",[159,461,462,472],{},[162,463,464],{},[165,465,466,469],{},[168,467,468],{},"Besoin",[168,470,471],{},"Composant ou fonction",[175,473,474,484,494,504],{},[165,475,476,479],{},[180,477,478],{},"Menu de liens",[180,480,481],{},[26,482,483],{},"\u003CUNavigationMenu :items=\"items\" \u002F>",[165,485,486,489],{},[180,487,488],{},"Fenêtre modale",[180,490,491],{},[26,492,493],{},"\u003CUModal v-model:open=\"ouverte\" title=\"...\">",[165,495,496,499],{},[180,497,498],{},"Menu d'actions",[180,500,501],{},[26,502,503],{},"\u003CUDropdownMenu :items=\"items\">",[165,505,506,509],{},[180,507,508],{},"Notification",[180,510,511],{},[26,512,513],{},"useToast().add({ title, color })",[10,515,516,517,153],{},"Détails : ",[149,518,459],{"href":519},"\u002Fnuxt-ui\u002Fnavigation-et-superpositions",[14,521,523],{"id":522},"thème-et-mode-sombre","Thème et mode sombre",[19,525,528],{"className":49,"code":526,"filename":527,"language":52,"meta":24,"style":24},"export default defineAppConfig({\n  ui: { colors: { primary: 'orange', neutral: 'stone' } }\n})\n","app\u002Fapp.config.ts",[26,529,530,541,558],{"__ignoreMap":24},[29,531,532,534,536,539],{"class":31,"line":32},[29,533,60],{"class":59},[29,535,63],{"class":59},[29,537,538],{"class":66}," defineAppConfig",[29,540,70],{"class":35},[29,542,543,546,549,552,555],{"class":31,"line":73},[29,544,545],{"class":76},"  ui: { colors: { primary: ",[29,547,548],{"class":39},"'orange'",[29,550,551],{"class":76},", neutral: ",[29,553,554],{"class":39},"'stone'",[29,556,557],{"class":76}," } }\n",[29,559,560],{"class":31,"line":89},[29,561,104],{"class":35},[563,564,565,572],"ul",{},[566,567,568,571],"li",{},[26,569,570],{},"\u003CUColorModeButton \u002F>"," bascule clair et sombre.",[566,573,574,577,578,190,581,584,585,153],{},[26,575,576],{},"useColorMode().preference"," : ",[26,579,580],{},"light",[26,582,583],{},"dark"," ou ",[26,586,587],{},"system",[10,589,516,590,153],{},[149,591,593],{"href":592},"\u002Fnuxt-ui\u002Ftheme-et-couleurs","Thème, couleurs et mode sombre",[14,595,597],{"id":596},"personnaliser","Personnaliser",[159,599,600,610],{},[162,601,602],{},[165,603,604,607],{},[168,605,606],{},"Niveau",[168,608,609],{},"Exemple",[175,611,612,622,632],{},[165,613,614,617],{},[180,615,616],{},"Une instance",[180,618,619],{},[26,620,621],{},"\u003CUButton class=\"rounded-full\" \u002F>",[165,623,624,627],{},[180,625,626],{},"Une zone",[180,628,629],{},[26,630,631],{},"\u003CUCard :ui=\"{ header: 'bg-primary\u002F10' }\" \u002F>",[165,633,634,637],{},[180,635,636],{},"Tout le site",[180,638,639,143,642],{},[26,640,641],{},"ui.button.defaultVariants",[26,643,644],{},"app.config.ts",[10,646,516,647,153],{},[149,648,650],{"href":649},"\u002Fnuxt-ui\u002Fpersonnaliser-un-composant","Personnaliser un composant",[652,653,654],"style",{},"html pre.shiki code .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}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 .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 .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}",{"title":24,"searchDepth":73,"depth":89,"links":656},[657,658,659,660,661,662,663],{"id":16,"depth":73,"text":17},{"id":156,"depth":73,"text":157},{"id":255,"depth":73,"text":256},{"id":346,"depth":73,"text":347},{"id":458,"depth":73,"text":459},{"id":522,"depth":73,"text":523},{"id":596,"depth":73,"text":597},"Le mémo de Nuxt UI 4 : installation, composants courants, formulaires, superpositions, thème et personnalisation.","md","nuxt-ui",{},[669,670,671,672,277,363,673,674,644,675],"mémo","aide-mémoire","Nuxt UI 4","@nuxt\u002Fui","UModal","useToast","mode sombre",true,"memo","\u002Fnuxt-ui",null,{"title":5,"description":664},[682],{"nom":683,"url":684},"Documentation de Nuxt UI (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started","nuxt-ui\u002Findex","Pnoigd-y-fKxDfkMD8ycd3vNVZaoTaFgPbZEExtzb2I",[688,690,692,694,696,698,700],{"path":151,"title":152,"stem":689},"nuxt-ui\u002F01.installation",{"path":342,"title":343,"stem":691},"nuxt-ui\u002F02.premiers-composants",{"path":454,"title":455,"stem":693},"nuxt-ui\u002F03.formulaires",{"path":519,"title":459,"stem":695},"nuxt-ui\u002F04.navigation-et-superpositions",{"path":592,"title":593,"stem":697},"nuxt-ui\u002F05.theme-et-couleurs",{"path":649,"title":650,"stem":699},"nuxt-ui\u002F06.personnaliser-un-composant",{"path":678,"title":5,"stem":685},[679,702],{"title":152,"path":151,"stem":689,"description":703,"children":-1},"Ajouter le module @nuxt\u002Fui à un projet Nuxt 4, importer Tailwind CSS 4 et envelopper l'application dans UApp.",[],[706,708,709,710,712,713,715],{"path":151,"title":152,"niveau":707,"stem":689},"debutant",{"path":342,"title":343,"niveau":707,"stem":691},{"path":454,"title":455,"niveau":707,"stem":693},{"path":519,"title":459,"niveau":711,"stem":695},"intermediaire",{"path":592,"title":593,"niveau":711,"stem":697},{"path":649,"title":650,"niveau":714,"stem":699},"avance",{"path":678,"title":5,"niveau":677,"stem":685},1794583427550]