[{"data":1,"prerenderedAt":669},["ShallowReactive",2],{"page-\u002Fnuxt-ui\u002Finstallation":3,"pieces-nuxt-ui":625,"autour-\u002Fnuxt-ui\u002Finstallation":650,"prerequis-\u002Fnuxt-ui\u002Finstallation":655,"plan-nuxt-ui":658},{"id":4,"title":5,"body":6,"description":601,"extension":602,"ligne":603,"meta":604,"motsCles":605,"navigation":607,"niveau":608,"path":609,"prerequis":610,"ressources":611,"seo":619,"sources":620,"stem":623,"__hash__":624},"docs\u002Fnuxt-ui\u002F01.installation.md","Installer Nuxt UI",{"type":7,"value":8,"toc":589},"minimark",[9,14,36,40,51,66,75,79,82,110,124,128,135,192,209,213,220,246,249,255,259,268,326,332,336,357,405,417,421,435,446,452,456,459,526,544,548,585],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,21,29],"ul",{},[18,19,20],"li",{},"Ce qu'est Nuxt UI et pourquoi l'utiliser dans un projet Nuxt.",[18,22,23,24,28],{},"Installer le paquet ",[25,26,27],"code",{},"@nuxt\u002Fui"," et déclarer le module.",[18,30,31,32,35],{},"Brancher le fichier CSS et envelopper l'application dans ",[25,33,34],{},"\u003CUApp>",".",[10,37,39],{"id":38},"cest-quoi-nuxt-ui","C'est quoi, Nuxt UI ?",[41,42,43,47,48,35],"p",{},[44,45,46],"strong",{},"Nuxt UI"," est une bibliothèque de composants d'interface : boutons, formulaires, fenêtres, menus. Tu n'écris plus le HTML et le CSS de chaque bouton, tu écris ",[25,49,50],{},"\u003CUButton>",[41,52,53,54,57,58,61,62,65],{},"Elle repose sur ",[44,55,56],{},"Tailwind CSS 4",", un outil qui met en forme les éléments avec des classes courtes comme ",[25,59,60],{},"p-4"," ou ",[25,63,64],{},"text-lg",". Tu n'as pas besoin de connaître Tailwind pour commencer.",[41,67,68,69,74],{},"Ce cours part d'un projet Nuxt 4 existant, comme celui du cours ",[70,71,73],"a",{"href":72},"\u002Fnuxt\u002Fintroduction","Introduction à Nuxt",". Le fil rouge reste un site de recettes.",[10,76,78],{"id":77},"installer-le-paquet","Installer le paquet",[41,80,81],{},"Dans le dossier du projet, lance :",[83,84,89],"pre",{"className":85,"code":86,"language":87,"meta":88,"style":88},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","npm install @nuxt\u002Fui tailwindcss\n","bash","",[25,90,91],{"__ignoreMap":88},[92,93,96,100,104,107],"span",{"class":94,"line":95},"line",1,[92,97,99],{"class":98},"sIXEE","npm",[92,101,103],{"class":102},"shWOn"," install",[92,105,106],{"class":102}," @nuxt\u002Fui",[92,108,109],{"class":102}," tailwindcss\n",[41,111,112,113,116,117,119,120,123],{},"Un ",[44,114,115],{},"module Nuxt"," est un paquet qui ajoute des fonctions au projet, ici les composants. ",[25,118,27],{}," en est un. ",[25,121,122],{},"tailwindcss"," est nécessaire à côté.",[10,125,127],{"id":126},"déclarer-le-module","Déclarer le module",[41,129,130,131,134],{},"Ouvre ",[25,132,133],{},"nuxt.config.ts"," et ajoute deux lignes :",[83,136,140],{"className":137,"code":138,"filename":133,"language":139,"meta":88,"style":88},"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","ts",[25,141,142,158,174,186],{"__ignoreMap":88},[92,143,144,148,151,155],{"class":94,"line":95},[92,145,147],{"class":146},"sOnC1","export",[92,149,150],{"class":146}," default",[92,152,154],{"class":153},"syCW7"," defineNuxtConfig",[92,156,157],{"class":98},"({\n",[92,159,161,165,168,171],{"class":94,"line":160},2,[92,162,164],{"class":163},"scfrF","  modules: [",[92,166,167],{"class":102},"'@nuxt\u002Fui'",[92,169,170],{"class":163},"]",[92,172,173],{"class":98},",\n",[92,175,177,180,183],{"class":94,"line":176},3,[92,178,179],{"class":163},"  css: [",[92,181,182],{"class":102},"'~\u002Fassets\u002Fcss\u002Fmain.css'",[92,184,185],{"class":163},"]\n",[92,187,189],{"class":94,"line":188},4,[92,190,191],{"class":98},"})\n",[41,193,194,197,198,201,202,205,206,35],{},[25,195,196],{},"modules"," active Nuxt UI. ",[25,199,200],{},"css"," indique le fichier de styles chargé sur toutes les pages. Le signe ",[25,203,204],{},"~"," désigne le dossier ",[25,207,208],{},"app\u002F",[10,210,212],{"id":211},"créer-le-fichier-css","Créer le fichier CSS",[41,214,215,216,219],{},"Crée ",[25,217,218],{},"app\u002Fassets\u002Fcss\u002Fmain.css"," avec deux importations :",[83,221,224],{"className":222,"code":223,"filename":218,"language":200,"meta":88,"style":88},"language-css shiki shiki-themes github-light-default github-dark-default github-dark-default","@import \"tailwindcss\";\n@import \"@nuxt\u002Fui\";\n",[25,225,226,237],{"__ignoreMap":88},[92,227,228,231,234],{"class":94,"line":95},[92,229,230],{"class":146},"@import",[92,232,233],{"class":102}," \"tailwindcss\"",[92,235,236],{"class":163},";\n",[92,238,239,241,244],{"class":94,"line":160},[92,240,230],{"class":146},[92,242,243],{"class":102}," \"@nuxt\u002Fui\"",[92,245,236],{"class":163},[41,247,248],{},"La première charge Tailwind CSS. La seconde charge les styles de Nuxt UI.",[250,251,252],"note",{},[41,253,254],{},"Sans ce fichier, les composants s'affichent sans mise en forme. C'est l'oubli le plus fréquent.",[10,256,258],{"id":257},"envelopper-lapplication-dans-uapp","Envelopper l'application dans UApp",[41,260,261,264,265,35],{},[44,262,263],{},"UApp"," est un composant qui prépare l'environnement des autres : il est requis pour les notifications (toasts), les info-bulles et les fenêtres. Place-le autour du contenu de ",[25,266,267],{},"app\u002Fapp.vue",[83,269,273],{"className":270,"code":271,"filename":267,"language":272,"meta":88,"style":88},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ctemplate>\n  \u003CUApp>\n    \u003CNuxtPage \u002F>\n  \u003C\u002FUApp>\n\u003C\u002Ftemplate>\n","vue",[25,274,275,287,296,307,316],{"__ignoreMap":88},[92,276,277,280,284],{"class":94,"line":95},[92,278,279],{"class":163},"\u003C",[92,281,283],{"class":282},"s5JFL","template",[92,285,286],{"class":163},">\n",[92,288,289,292,294],{"class":94,"line":160},[92,290,291],{"class":163},"  \u003C",[92,293,263],{"class":282},[92,295,286],{"class":163},[92,297,298,301,304],{"class":94,"line":176},[92,299,300],{"class":163},"    \u003C",[92,302,303],{"class":282},"NuxtPage",[92,305,306],{"class":163}," \u002F>\n",[92,308,309,312,314],{"class":94,"line":188},[92,310,311],{"class":163},"  \u003C\u002F",[92,313,263],{"class":282},[92,315,286],{"class":163},[92,317,319,322,324],{"class":94,"line":318},5,[92,320,321],{"class":163},"\u003C\u002F",[92,323,283],{"class":282},[92,325,286],{"class":163},[41,327,328,331],{},[25,329,330],{},"\u003CNuxtPage \u002F>"," affiche la page correspondant à l'adresse, comme dans le cours sur le routage.",[10,333,335],{"id":334},"vérifier-que-ça-marche","Vérifier que ça marche",[337,338,339,345,351],"ol",{},[18,340,341,342,35],{},"Lance ",[25,343,344],{},"npm run dev",[18,346,130,347,350],{},[25,348,349],{},"app\u002Fpages\u002Findex.vue"," et mets-y un bouton.",[18,352,130,353,356],{},[25,354,355],{},"http:\u002F\u002Flocalhost:3000"," : un bouton coloré doit apparaître.",[83,358,360],{"className":270,"code":359,"filename":349,"language":272,"meta":88,"style":88},"\u003Ctemplate>\n  \u003CUButton label=\"Voir les recettes\" to=\"\u002Frecettes\" \u002F>\n\u003C\u002Ftemplate>\n",[25,361,362,370,397],{"__ignoreMap":88},[92,363,364,366,368],{"class":94,"line":95},[92,365,279],{"class":163},[92,367,283],{"class":282},[92,369,286],{"class":163},[92,371,372,374,377,381,384,387,390,392,395],{"class":94,"line":160},[92,373,291],{"class":163},[92,375,376],{"class":282},"UButton",[92,378,380],{"class":379},"s5iOY"," label",[92,382,383],{"class":163},"=",[92,385,386],{"class":102},"\"Voir les recettes\"",[92,388,389],{"class":379}," to",[92,391,383],{"class":163},[92,393,394],{"class":102},"\"\u002Frecettes\"",[92,396,306],{"class":163},[92,398,399,401,403],{"class":94,"line":176},[92,400,321],{"class":163},[92,402,283],{"class":282},[92,404,286],{"class":163},[41,406,407,408,411,412,414,415,35],{},"Si le bouton est affiché sans couleur, retourne vérifier ",[25,409,410],{},"main.css"," et la ligne ",[25,413,200],{}," de ",[25,416,133],{},[10,418,420],{"id":419},"les-composants-sont-importés-tout-seuls","Les composants sont importés tout seuls",[41,422,423,424,427,428,431,432,35],{},"Tu n'écris aucun ",[25,425,426],{},"import",". Nuxt reconnaît les noms qui commencent par ",[25,429,430],{},"U"," et charge le bon composant, comme pour les composants de ton dossier ",[25,433,434],{},"app\u002Fcomponents\u002F",[41,436,437,438,441,442,445],{},"Tous les composants ont la même logique : des ",[44,439,440],{},"props"," (réglages passés comme des attributs HTML), des ",[44,443,444],{},"slots"," (zones où glisser du contenu) et une apparence qu'on peut changer. Les cours suivants les explorent un à un.",[447,448,449],"tip",{},[41,450,451],{},"La liste complète des composants est sur le site officiel, avec un exemple pour chacun. Elle est en anglais, mais les extraits de code se lisent facilement.",[10,453,455],{"id":454},"utiliser-aussi-les-classes-tailwind","Utiliser aussi les classes Tailwind",[41,457,458],{},"Comme Tailwind CSS est installé, tu peux mettre en forme tes propres éléments avec ses classes :",[83,460,462],{"className":270,"code":461,"language":272,"meta":88,"style":88},"\u003Ctemplate>\n  \u003Cdiv class=\"p-6 text-center\">\n    \u003Ch1 class=\"text-2xl font-bold\">Mes recettes\u003C\u002Fh1>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[25,463,464,472,489,510,518],{"__ignoreMap":88},[92,465,466,468,470],{"class":94,"line":95},[92,467,279],{"class":163},[92,469,283],{"class":282},[92,471,286],{"class":163},[92,473,474,476,479,482,484,487],{"class":94,"line":160},[92,475,291],{"class":163},[92,477,478],{"class":282},"div",[92,480,481],{"class":379}," class",[92,483,383],{"class":163},[92,485,486],{"class":102},"\"p-6 text-center\"",[92,488,286],{"class":163},[92,490,491,493,496,498,500,503,506,508],{"class":94,"line":176},[92,492,300],{"class":163},[92,494,495],{"class":282},"h1",[92,497,481],{"class":379},[92,499,383],{"class":163},[92,501,502],{"class":102},"\"text-2xl font-bold\"",[92,504,505],{"class":163},">Mes recettes\u003C\u002F",[92,507,495],{"class":282},[92,509,286],{"class":163},[92,511,512,514,516],{"class":94,"line":188},[92,513,311],{"class":163},[92,515,478],{"class":282},[92,517,286],{"class":163},[92,519,520,522,524],{"class":94,"line":318},[92,521,321],{"class":163},[92,523,283],{"class":282},[92,525,286],{"class":163},[41,527,528,531,532,535,536,539,540,543],{},[25,529,530],{},"p-6"," ajoute de l'espace intérieur, ",[25,533,534],{},"text-center"," centre le texte, ",[25,537,538],{},"text-2xl"," et ",[25,541,542],{},"font-bold"," agrandissent et épaississent le titre. Les composants Nuxt UI et tes classes cohabitent sans réglage.",[10,545,547],{"id":546},"à-retenir","À retenir",[15,549,550,553,563,573,578],{},[18,551,552],{},"Nuxt UI est une bibliothèque de composants qui s'appuie sur Tailwind CSS 4.",[18,554,555,556,559,560,35],{},"Installation : ",[25,557,558],{},"npm install @nuxt\u002Fui tailwindcss",", puis ",[25,561,562],{},"modules: ['@nuxt\u002Fui']",[18,564,565,566,569,570,35],{},"Le fichier CSS contient ",[25,567,568],{},"@import \"tailwindcss\";"," puis ",[25,571,572],{},"@import \"@nuxt\u002Fui\";",[18,574,575,577],{},[25,576,34],{}," enveloppe l'application, il est requis pour les toasts et les info-bulles.",[18,579,580,581,584],{},"Les composants ",[25,582,583],{},"U..."," sont importés automatiquement.",[586,587,588],"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":88,"searchDepth":160,"depth":176,"links":590},[591,592,593,594,595,596,597,598,599,600],{"id":12,"depth":160,"text":13},{"id":38,"depth":160,"text":39},{"id":77,"depth":160,"text":78},{"id":126,"depth":160,"text":127},{"id":211,"depth":160,"text":212},{"id":257,"depth":160,"text":258},{"id":334,"depth":160,"text":335},{"id":419,"depth":160,"text":420},{"id":454,"depth":160,"text":455},{"id":546,"depth":160,"text":547},"Ajouter le module @nuxt\u002Fui à un projet Nuxt 4, importer Tailwind CSS 4 et envelopper l'application dans UApp.","md","nuxt-ui",{},[46,27,56,115,263,410,133,606],"composants prêts à l'emploi",true,"debutant","\u002Fnuxt-ui\u002Finstallation",[72],[612,616],{"nom":613,"url":614,"type":615,"anglais":607},"Nuxt UI, installation avec Nuxt (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fgetting-started\u002Finstallation\u002Fnuxt","doc",{"nom":617,"url":618,"type":615,"anglais":607},"Nuxt UI, le composant Button (en anglais)","https:\u002F\u002Fui.nuxt.com\u002Fdocs\u002Fcomponents\u002Fbutton",{"title":5,"description":601},[621],{"nom":622,"url":614},"Installation de Nuxt UI avec Nuxt (en anglais)","nuxt-ui\u002F01.installation","qTntSI_cgI6cTXnvoqLwuutceVqu9voxQZq2d2ZjMtw",[626,627,631,635,639,643,647],{"path":609,"title":5,"stem":623},{"path":628,"title":629,"stem":630},"\u002Fnuxt-ui\u002Fpremiers-composants","Premiers composants","nuxt-ui\u002F02.premiers-composants",{"path":632,"title":633,"stem":634},"\u002Fnuxt-ui\u002Fformulaires","Formulaires et validation","nuxt-ui\u002F03.formulaires",{"path":636,"title":637,"stem":638},"\u002Fnuxt-ui\u002Fnavigation-et-superpositions","Navigation et superpositions","nuxt-ui\u002F04.navigation-et-superpositions",{"path":640,"title":641,"stem":642},"\u002Fnuxt-ui\u002Ftheme-et-couleurs","Thème, couleurs et mode sombre","nuxt-ui\u002F05.theme-et-couleurs",{"path":644,"title":645,"stem":646},"\u002Fnuxt-ui\u002Fpersonnaliser-un-composant","Personnaliser un composant","nuxt-ui\u002F06.personnaliser-un-composant",{"path":648,"title":46,"stem":649},"\u002Fnuxt-ui","nuxt-ui\u002Findex",[651,653],{"title":46,"path":648,"stem":649,"description":652,"children":-1},"Le mémo de Nuxt UI 4 : installation, composants courants, formulaires, superpositions, thème et personnalisation.",{"title":629,"path":628,"stem":630,"description":654,"children":-1},"Utiliser UButton, UCard, UBadge et les icônes Lucide pour construire une carte de recette, et régler couleur, variante et taille.",[656],{"path":72,"title":73,"ligne":657},"nuxt",[659,660,661,662,664,665,667],{"path":609,"title":5,"niveau":608,"stem":623},{"path":628,"title":629,"niveau":608,"stem":630},{"path":632,"title":633,"niveau":608,"stem":634},{"path":636,"title":637,"niveau":663,"stem":638},"intermediaire",{"path":640,"title":641,"niveau":663,"stem":642},{"path":644,"title":645,"niveau":666,"stem":646},"avance",{"path":648,"title":46,"niveau":668,"stem":649},"memo",1794583445138]