[{"data":1,"prerenderedAt":536},["ShallowReactive",2],{"page-\u002Fnuxt\u002Fintroduction":3,"pieces-nuxt":491,"autour-\u002Fnuxt\u002Fintroduction":519,"prerequis-\u002Fnuxt\u002Fintroduction":524,"plan-nuxt":525},{"id":4,"title":5,"body":6,"description":451,"extension":452,"ligne":453,"meta":454,"motsCles":455,"navigation":240,"niveau":464,"path":465,"prerequis":466,"ressources":467,"seo":479,"sources":480,"stem":489,"__hash__":490},"docs\u002Fnuxt\u002F01.introduction.md","Introduction à Nuxt",{"type":7,"value":8,"toc":438},"minimark",[9,14,27,31,35,38,41,45,50,66,70,73,77,91,95,117,276,280,283,297,300,311,315,318,321,337,340,359,363,366,388,395,408,412,434],[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",{},"Ce que Nuxt ajoute à Vue, et pourquoi.",[18,22,23],{},"Quand Nuxt est un bon choix, et quand il ne l'est pas.",[18,25,26],{},"Comment créer et lancer ton premier projet Nuxt.",[10,28,30],{"id":29},"vue-puis-nuxt","Vue, puis Nuxt",[32,33,34],"p",{},"Tu connais déjà Vue : des composants, des props, de la réactivité. Vue s'occupe de l'interface. Mais un vrai site demande plus : plusieurs pages, des données à charger, parfois un petit serveur.",[32,36,37],{},"Avec Vue seul, tu dois assembler tout ça toi-même. Tu installes un routeur, tu le configures, tu choisis comment charger les données, tu montes un serveur à part.",[32,39,40],{},"Nuxt est un framework construit sur Vue. Il fait ces choix pour toi et les range dans une structure de dossiers fixe. Dans l'immeuble, c'est le toit-terrasse : d'en haut, on voit tout, et tout est relié. Ce site est d'ailleurs lui-même construit avec Nuxt 4, Nuxt UI et Nuxt Content.",[10,42,44],{"id":43},"ce-que-nuxt-ajoute","Ce que Nuxt ajoute",[46,47,49],"h3",{"id":48},"le-routage-par-fichiers","Le routage par fichiers",[32,51,52,53,57,58,61,62,65],{},"Chaque fichier du dossier ",[54,55,56],"code",{},"app\u002Fpages\u002F"," devient une page du site. Le fichier ",[54,59,60],{},"app\u002Fpages\u002Frecettes.vue"," répond à l'adresse ",[54,63,64],{},"\u002Frecettes",". Tu n'écris aucune configuration de routes.",[46,67,69],{"id":68},"le-rendu-serveur","Le rendu serveur",[32,71,72],{},"Avec Vue seul, le navigateur reçoit une page presque vide, puis JavaScript la remplit. Avec Nuxt, par défaut, le serveur envoie une page HTML déjà remplie. Le texte s'affiche plus vite, et les moteurs de recherche le lisent directement. Ensuite, Vue prend le relais dans le navigateur pour rendre la page interactive.",[46,74,76],{"id":75},"les-routes-api","Les routes API",[32,78,79,80,83,84,61,87,90],{},"Le dossier ",[54,81,82],{},"server\u002F"," accueille ton code serveur. Un fichier ",[54,85,86],{},"server\u002Fapi\u002Fhello.ts",[54,88,89],{},"\u002Fapi\u002Fhello",". Ton interface et ta petite API vivent dans le même projet.",[46,92,94],{"id":93},"les-auto-imports","Les auto-imports",[32,96,97,98,101,102,105,106,109,110,105,113,116],{},"Plus besoin d'écrire ",[54,99,100],{},"import { ref } from 'vue'"," en haut de chaque fichier. Nuxt importe pour toi les fonctions de Vue (",[54,103,104],{},"ref",", ",[54,107,108],{},"computed","), ses propres fonctions (",[54,111,112],{},"useFetch",[54,114,115],{},"useRoute",") et tes composants.",[118,119,124],"pre",{"className":120,"code":121,"language":122,"meta":123,"style":123},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Cscript setup lang=\"ts\">\n\u002F\u002F Aucun import : ref et computed sont disponibles directement.\nconst personnes = ref(4)\nconst message = computed(() => `Recette pour ${personnes.value} personnes`)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cp>{{ message }}\u003C\u002Fp>\n\u003C\u002Ftemplate>\n","vue","",[54,125,126,156,163,189,225,235,242,252,267],{"__ignoreMap":123},[127,128,131,135,139,143,146,149,153],"span",{"class":129,"line":130},"line",1,[127,132,134],{"class":133},"scfrF","\u003C",[127,136,138],{"class":137},"s5JFL","script",[127,140,142],{"class":141},"s5iOY"," setup",[127,144,145],{"class":141}," lang",[127,147,148],{"class":133},"=",[127,150,152],{"class":151},"shWOn","\"ts\"",[127,154,155],{"class":133},">\n",[127,157,159],{"class":129,"line":158},2,[127,160,162],{"class":161},"sd6ml","\u002F\u002F Aucun import : ref et computed sont disponibles directement.\n",[127,164,166,170,173,176,180,183,186],{"class":129,"line":165},3,[127,167,169],{"class":168},"sOnC1","const",[127,171,172],{"class":141}," personnes",[127,174,175],{"class":168}," =",[127,177,179],{"class":178},"syCW7"," ref",[127,181,182],{"class":133},"(",[127,184,185],{"class":141},"4",[127,187,188],{"class":133},")\n",[127,190,192,194,197,199,202,205,208,211,214,217,220,223],{"class":129,"line":191},4,[127,193,169],{"class":168},[127,195,196],{"class":141}," message",[127,198,175],{"class":168},[127,200,201],{"class":178}," computed",[127,203,204],{"class":133},"(() ",[127,206,207],{"class":168},"=>",[127,209,210],{"class":151}," `Recette pour ${",[127,212,213],{"class":133},"personnes",[127,215,216],{"class":151},".",[127,218,219],{"class":133},"value",[127,221,222],{"class":151},"} personnes`",[127,224,188],{"class":133},[127,226,228,231,233],{"class":129,"line":227},5,[127,229,230],{"class":133},"\u003C\u002F",[127,232,138],{"class":137},[127,234,155],{"class":133},[127,236,238],{"class":129,"line":237},6,[127,239,241],{"emptyLinePlaceholder":240},true,"\n",[127,243,245,247,250],{"class":129,"line":244},7,[127,246,134],{"class":133},[127,248,249],{"class":137},"template",[127,251,155],{"class":133},[127,253,255,258,260,263,265],{"class":129,"line":254},8,[127,256,257],{"class":133},"  \u003C",[127,259,32],{"class":137},[127,261,262],{"class":133},">{{ message }}\u003C\u002F",[127,264,32],{"class":137},[127,266,155],{"class":133},[127,268,270,272,274],{"class":129,"line":269},9,[127,271,230],{"class":133},[127,273,249],{"class":137},[127,275,155],{"class":133},[10,277,279],{"id":278},"quand-utiliser-nuxt","Quand utiliser Nuxt",[32,281,282],{},"Nuxt est un bon choix si :",[15,284,285,288,291,294],{},[18,286,287],{},"ton site a plusieurs pages et des liens entre elles ;",[18,289,290],{},"le référencement compte (blog, vitrine, catalogue) ;",[18,292,293],{},"tu dois charger des données depuis une API ;",[18,295,296],{},"tu veux une petite API dans le même projet que l'interface.",[32,298,299],{},"Nuxt est moins utile si :",[15,301,302,305,308],{},[18,303,304],{},"tu ajoutes juste un petit composant interactif dans une page existante : Vue seul suffit ;",[18,306,307],{},"ton site tient en une page fixe : du HTML et du CSS suffisent ;",[18,309,310],{},"tu découvres à peine Vue : apprends d'abord les composants et la réactivité, sinon tu ne sauras pas ce qui vient de Vue et ce qui vient de Nuxt.",[10,312,314],{"id":313},"créer-ton-premier-projet","Créer ton premier projet",[32,316,317],{},"Dans ce cours, tu vas construire un petit site de recettes : une liste, une page par recette, et une API qui fournit les données.",[32,319,320],{},"Vérifie d'abord ta version de Node. Nuxt demande Node 22 ou plus.",[118,322,326],{"className":323,"code":324,"language":325,"meta":123,"style":123},"language-bash shiki shiki-themes github-light-default github-dark-default github-dark-default","node -v\n","bash",[54,327,328],{"__ignoreMap":123},[127,329,330,334],{"class":129,"line":130},[127,331,333],{"class":332},"sIXEE","node",[127,335,336],{"class":141}," -v\n",[32,338,339],{},"Crée ensuite le projet :",[118,341,343],{"className":323,"code":342,"language":325,"meta":123,"style":123},"npm create nuxt@latest mon-site\n",[54,344,345],{"__ignoreMap":123},[127,346,347,350,353,356],{"class":129,"line":130},[127,348,349],{"class":332},"npm",[127,351,352],{"class":151}," create",[127,354,355],{"class":151}," nuxt@latest",[127,357,358],{"class":151}," mon-site\n",[360,361],"anatomie-commande",{"exemple":362},"npm-create-nuxt",[32,364,365],{},"Si l'assistant te pose des questions, garde les choix proposés par défaut. Entre ensuite dans le dossier et lance le serveur de développement :",[118,367,369],{"className":323,"code":368,"language":325,"meta":123,"style":123},"cd mon-site\nnpm run dev\n",[54,370,371,378],{"__ignoreMap":123},[127,372,373,376],{"class":129,"line":130},[127,374,375],{"class":141},"cd",[127,377,358],{"class":151},[127,379,380,382,385],{"class":129,"line":158},[127,381,349],{"class":332},[127,383,384],{"class":151}," run",[127,386,387],{"class":151}," dev\n",[32,389,390,391,394],{},"Ouvre ",[54,392,393],{},"http:\u002F\u002Flocalhost:3000"," dans ton navigateur. Ta page s'affiche. Modifie un fichier, enregistre : la page se met à jour toute seule.",[396,397,398],"tip",{},[32,399,400,401,404,405,216],{},"Garde le terminal de ",[54,402,403],{},"npm run dev"," ouvert pendant que tu travailles. Pour arrêter le serveur, appuie sur ",[54,406,407],{},"Ctrl + C",[10,409,411],{"id":410},"à-retenir","À retenir",[15,413,414,417,420,423],{},[18,415,416],{},"Nuxt est un framework construit sur Vue : il ajoute une structure et des choix par défaut.",[18,418,419],{},"Il apporte le routage par fichiers, le rendu serveur, les routes API et les auto-imports.",[18,421,422],{},"Pour un petit composant isolé, Vue seul suffit.",[18,424,425,428,429,431,432,216],{},[54,426,427],{},"npm create nuxt@latest mon-site"," crée un projet, ",[54,430,403],{}," le lance sur ",[54,433,393],{},[435,436,437],"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 .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}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 .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}",{"title":123,"searchDepth":158,"depth":165,"links":439},[440,441,442,448,449,450],{"id":12,"depth":158,"text":13},{"id":29,"depth":158,"text":30},{"id":43,"depth":158,"text":44,"children":443},[444,445,446,447],{"id":48,"depth":165,"text":49},{"id":68,"depth":165,"text":69},{"id":75,"depth":165,"text":76},{"id":93,"depth":165,"text":94},{"id":278,"depth":158,"text":279},{"id":313,"depth":158,"text":314},{"id":410,"depth":158,"text":411},"Ce que Nuxt ajoute à Vue, quand l'utiliser, et comment créer ton premier projet.","md","nuxt",{},[456,457,458,459,460,461,462,463],"Nuxt","Vue","framework","rendu serveur","SSR","routage","auto-imports","npm create nuxt","debutant","\u002Fnuxt\u002Fintroduction",null,[468,472,475],{"nom":469,"url":470,"type":471,"anglais":240},"Documentation officielle de Nuxt","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fintroduction","doc",{"nom":473,"url":474,"type":471},"Guide officiel de Vue","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fintroduction.html",{"nom":476,"url":477,"type":478},"Tutoriel interactif de Vue","https:\u002F\u002Ffr.vuejs.org\u002Ftutorial\u002F","exercice",{"title":5,"description":451},[481,483,486],{"nom":482,"url":470},"Introduction (en anglais)",{"nom":484,"url":485},"Installation (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Finstallation",{"nom":487,"url":488},"Auto-imports (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fguide\u002Fconcepts\u002Fauto-imports","nuxt\u002F01.introduction","3zcYjjZqx8oK8WiekQjSObtm5p2Oq82dj5FzWH90Ut8",[492,493,497,501,505,509,512,516],{"path":465,"title":5,"stem":489},{"path":494,"title":495,"stem":496},"\u002Fnuxt\u002Fstructure","La structure d'un projet","nuxt\u002F02.structure",{"path":498,"title":499,"stem":500},"\u002Fnuxt\u002Fpages-et-routage","Pages et routage","nuxt\u002F03.pages-et-routage",{"path":502,"title":503,"stem":504},"\u002Fnuxt\u002Fcomposants","Les composants","nuxt\u002F04.composants",{"path":506,"title":507,"stem":508},"\u002Fnuxt\u002Frecuperer-des-donnees","Récupérer des données","nuxt\u002F05.recuperer-des-donnees",{"path":510,"title":76,"stem":511},"\u002Fnuxt\u002Froutes-api","nuxt\u002F06.routes-api",{"path":513,"title":514,"stem":515},"\u002Fnuxt\u002Fmodes-de-rendu","Les modes de rendu","nuxt\u002F07.modes-de-rendu",{"path":517,"title":456,"stem":518},"\u002Fnuxt","nuxt\u002Findex",[520,522],{"title":456,"path":517,"stem":518,"description":521,"children":-1},"Le mémo de Nuxt 4 : commandes, dossiers, pages, données, routes API et modes de rendu.",{"title":495,"path":494,"stem":496,"description":523,"children":-1},"Les dossiers d'un projet Nuxt 4 et le rôle de chacun.",[],[526,527,528,529,530,532,533,534],{"path":465,"title":5,"niveau":464,"stem":489},{"path":494,"title":495,"niveau":464,"stem":496},{"path":498,"title":499,"niveau":464,"stem":500},{"path":502,"title":503,"niveau":464,"stem":504},{"path":506,"title":507,"niveau":531,"stem":508},"intermediaire",{"path":510,"title":76,"niveau":531,"stem":511},{"path":513,"title":514,"niveau":531,"stem":515},{"path":517,"title":456,"niveau":535,"stem":518},"memo",1794583439578]