[{"data":1,"prerenderedAt":595},["ShallowReactive",2],{"page-\u002Fnuxt\u002Fstructure":3,"pieces-nuxt":548,"autour-\u002Fnuxt\u002Fstructure":577,"prerequis-\u002Fnuxt\u002Fstructure":582,"plan-nuxt":584},{"id":4,"title":5,"body":6,"description":513,"extension":514,"ligne":515,"meta":516,"motsCles":517,"navigation":525,"niveau":526,"path":527,"prerequis":528,"ressources":530,"seo":535,"sources":536,"stem":546,"__hash__":547},"docs\u002Fnuxt\u002F02.structure.md","La structure d'un projet",{"type":7,"value":8,"toc":497},"minimark",[9,14,45,49,61,64,67,74,79,223,226,234,240,246,314,320,325,331,345,358,365,371,429,432,445,449,452,460,464,493],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,37,42],"ul",{},[18,19,20,21,25,26,25,29,32,33,36],"li",{},"Les quatre zones d'un projet Nuxt 4 : ",[22,23,24],"code",{},"app\u002F",", ",[22,27,28],{},"server\u002F",[22,30,31],{},"shared\u002F"," et ",[22,34,35],{},"public\u002F",".",[18,38,39,40,36],{},"Le rôle de chaque dossier de ",[22,41,24],{},[18,43,44],{},"Où ranger chaque fichier de ton site de recettes.",[10,46,48],{"id":47},"une-structure-fixe","Une structure fixe",[50,51,52,53,56,57,60],"p",{},"Dans Nuxt, l'emplacement d'un fichier a un sens. Un fichier dans ",[22,54,55],{},"app\u002Fpages\u002F"," devient une page. Un fichier dans ",[22,58,59],{},"server\u002Fapi\u002F"," devient une route d'API. Si tu ranges un fichier au mauvais endroit, Nuxt ne le trouve pas.",[50,62,63],{},"C'est une contrainte, mais aussi un gain : deux projets Nuxt se ressemblent. Tu sais où chercher dans le code de quelqu'un d'autre.",[65,66],"arbo-projet",{},[10,68,70,71,73],{"id":69},"le-dossier-app-linterface","Le dossier ",[22,72,24],{}," : l'interface",[50,75,76,77,36],{},"Tout ce qui s'affiche dans le navigateur vit dans ",[22,78,24],{},[80,81,82,95],"table",{},[83,84,85],"thead",{},[86,87,88,92],"tr",{},[89,90,91],"th",{},"Dossier ou fichier",[89,93,94],{},"Rôle",[96,97,98,109,119,129,143,153,163,173,183,193,203,213],"tbody",{},[86,99,100,106],{},[101,102,103],"td",{},[22,104,105],{},"app.vue",[101,107,108],{},"Le composant racine, qui englobe tout le site.",[86,110,111,116],{},[101,112,113],{},[22,114,115],{},"pages\u002F",[101,117,118],{},"Une page par fichier. Le chemin du fichier donne l'adresse.",[86,120,121,126],{},[101,122,123],{},[22,124,125],{},"components\u002F",[101,127,128],{},"Tes composants Vue, importés automatiquement.",[86,130,131,136],{},[101,132,133],{},[22,134,135],{},"composables\u002F",[101,137,138,139,142],{},"Tes fonctions réutilisables ",[22,140,141],{},"useXxx",", importées automatiquement.",[86,144,145,150],{},[101,146,147],{},[22,148,149],{},"layouts\u002F",[101,151,152],{},"Les gabarits de page : en-tête, pied de page, menu.",[86,154,155,160],{},[101,156,157],{},[22,158,159],{},"middleware\u002F",[101,161,162],{},"Du code lancé avant d'afficher une page, par exemple pour vérifier une connexion.",[86,164,165,170],{},[101,166,167],{},[22,168,169],{},"plugins\u002F",[101,171,172],{},"Du code lancé au démarrage de l'application.",[86,174,175,180],{},[101,176,177],{},[22,178,179],{},"utils\u002F",[101,181,182],{},"Des fonctions utilitaires, importées automatiquement.",[86,184,185,190],{},[101,186,187],{},[22,188,189],{},"assets\u002F",[101,191,192],{},"Le CSS, les polices et les images traités par l'outil de build.",[86,194,195,200],{},[101,196,197],{},[22,198,199],{},"app.config.ts",[101,201,202],{},"Des réglages publics de l'interface, comme le nom du site.",[86,204,205,210],{},[101,206,207],{},[22,208,209],{},"error.vue",[101,211,212],{},"La page affichée en cas d'erreur, par exemple une 404.",[86,214,215,220],{},[101,216,217],{},[22,218,219],{},"spa-loading-template.html",[101,221,222],{},"L'écran de chargement affiché quand le rendu se fait uniquement dans le navigateur.",[50,224,225],{},"Tu n'as pas besoin de tous ces dossiers. Crée-les quand tu en as l'usage.",[227,228,229],"warning",{},[50,230,231,233],{},[22,232,199],{}," est envoyé au navigateur. N'y mets jamais de mot de passe ni de clé d'API.",[10,235,70,237,239],{"id":236},"le-dossier-server-le-serveur",[22,238,28],{}," : le serveur",[50,241,242,243,245],{},"Le code de ",[22,244,28],{}," tourne uniquement sur le serveur. Le navigateur ne le reçoit jamais.",[80,247,248,257],{},[83,249,250],{},[86,251,252,255],{},[89,253,254],{},"Dossier",[89,256,94],{},[96,258,259,271,284,294,304],{},[86,260,261,265],{},[101,262,263],{},[22,264,59],{},[101,266,267,268,36],{},"Les routes d'API, servies sous ",[22,269,270],{},"\u002Fapi\u002F...",[86,272,273,278],{},[101,274,275],{},[22,276,277],{},"server\u002Froutes\u002F",[101,279,280,281,36],{},"Des routes serveur sans le préfixe ",[22,282,283],{},"\u002Fapi",[86,285,286,291],{},[101,287,288],{},[22,289,290],{},"server\u002Fmiddleware\u002F",[101,292,293],{},"Du code lancé à chaque requête reçue par le serveur.",[86,295,296,301],{},[101,297,298],{},[22,299,300],{},"server\u002Fplugins\u002F",[101,302,303],{},"Du code lancé au démarrage du serveur.",[86,305,306,311],{},[101,307,308],{},[22,309,310],{},"server\u002Futils\u002F",[101,312,313],{},"Des fonctions utilitaires pour le serveur.",[10,315,70,317,319],{"id":316},"le-dossier-shared-le-code-commun",[22,318,31],{}," : le code commun",[50,321,322,324],{},[22,323,31],{}," contient du code utilisable à la fois par l'interface et par le serveur. Par exemple, le type TypeScript d'une recette : l'API le renvoie, la page l'affiche. Tu l'écris une seule fois.",[10,326,70,328,330],{"id":327},"le-dossier-public-les-fichiers-bruts",[22,329,35],{}," : les fichiers bruts",[50,332,333,334,336,337,340,341,344],{},"Les fichiers de ",[22,335,35],{}," sont servis tels quels, à la racine du site. ",[22,338,339],{},"public\u002Ffavicon.ico"," répond à l'adresse ",[22,342,343],{},"\u002Ffavicon.ico",". Nuxt ne les transforme pas.",[50,346,347,348,351,352,354,355,357],{},"La différence avec ",[22,349,350],{},"app\u002Fassets\u002F"," : un fichier de ",[22,353,189],{}," passe par l'outil de build, qui peut le compresser ou le renommer. Un fichier de ",[22,356,35],{}," reste intact.",[10,359,361,362],{"id":360},"le-fichier-nuxtconfigts","Le fichier ",[22,363,364],{},"nuxt.config.ts",[50,366,367,368,370],{},"À la racine, ",[22,369,364],{}," règle le projet : les modules installés, la configuration privée, les modes de rendu.",[372,373,378],"pre",{"className":374,"code":375,"language":376,"meta":377,"style":377},"language-ts shiki shiki-themes github-light-default github-dark-default github-dark-default","export default defineNuxtConfig({\n  modules: [],\n  devtools: { enabled: true }\n})\n","ts","",[22,379,380,400,410,423],{"__ignoreMap":377},[381,382,385,389,392,396],"span",{"class":383,"line":384},"line",1,[381,386,388],{"class":387},"sOnC1","export",[381,390,391],{"class":387}," default",[381,393,395],{"class":394},"syCW7"," defineNuxtConfig",[381,397,399],{"class":398},"sIXEE","({\n",[381,401,403,407],{"class":383,"line":402},2,[381,404,406],{"class":405},"scfrF","  modules: []",[381,408,409],{"class":398},",\n",[381,411,413,416,420],{"class":383,"line":412},3,[381,414,415],{"class":405},"  devtools: { enabled: ",[381,417,419],{"class":418},"s5iOY","true",[381,421,422],{"class":405}," }\n",[381,424,426],{"class":383,"line":425},4,[381,427,428],{"class":398},"})\n",[50,430,431],{},"Tu y reviendras dans les chapitres sur les routes API et les modes de rendu.",[433,434,435],"note",{},[50,436,437,438,32,441,444],{},"Les dossiers ",[22,439,440],{},".nuxt\u002F",[22,442,443],{},".output\u002F"," sont générés par Nuxt. Ne les modifie pas à la main : ils sont recréés à chaque lancement ou à chaque build.",[10,446,448],{"id":447},"ton-site-de-recettes","Ton site de recettes",[50,450,451],{},"Voici où iront les fichiers du fil rouge :",[372,453,458],{"className":454,"code":456,"language":457,"meta":377},[455],"language-text","mon-site\u002F\n├─ app\u002F\n│  ├─ app.vue\n│  ├─ components\u002F\n│  │  └─ CarteRecette.vue\n│  ├─ layouts\u002F\n│  │  └─ default.vue\n│  └─ pages\u002F\n│     ├─ index.vue\n│     └─ recettes\u002F\n│        └─ [id].vue\n├─ server\u002F\n│  └─ api\u002F\n│     └─ recettes\u002F\n│        ├─ index.get.ts\n│        └─ [id].get.ts\n├─ shared\u002F\n│  └─ types\u002F\n│     └─ recette.ts\n├─ public\u002F\n│  └─ favicon.ico\n└─ nuxt.config.ts\n","text",[22,459,456],{"__ignoreMap":377},[10,461,463],{"id":462},"à-retenir","À retenir",[15,465,466,477,480,488],{},[18,467,468,470,471,473,474,476],{},[22,469,24],{}," contient l'interface, ",[22,472,28],{}," le code serveur, ",[22,475,31],{}," le code commun aux deux.",[18,478,479],{},"L'emplacement d'un fichier décide de son rôle : une page, un composant, une route d'API.",[18,481,482,484,485,487],{},[22,483,35],{}," sert les fichiers tels quels, ",[22,486,189],{}," les fait passer par le build.",[18,489,490,492],{},[22,491,364],{}," règle tout le projet.",[494,495,496],"style",{},"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 .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .scfrF, html code.shiki .scfrF{--shiki-light:#1F2328;--shiki-default:#E6EDF3;--shiki-dark:#E6EDF3}html pre.shiki code .s5iOY, html code.shiki .s5iOY{--shiki-light:#0550AE;--shiki-default:#79C0FF;--shiki-dark:#79C0FF}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);}",{"title":377,"searchDepth":402,"depth":412,"links":498},[499,500,501,503,505,507,509,511,512],{"id":12,"depth":402,"text":13},{"id":47,"depth":402,"text":48},{"id":69,"depth":402,"text":502},"Le dossier app\u002F : l'interface",{"id":236,"depth":402,"text":504},"Le dossier server\u002F : le serveur",{"id":316,"depth":402,"text":506},"Le dossier shared\u002F : le code commun",{"id":327,"depth":402,"text":508},"Le dossier public\u002F : les fichiers bruts",{"id":360,"depth":402,"text":510},"Le fichier nuxt.config.ts",{"id":447,"depth":402,"text":448},{"id":462,"depth":402,"text":463},"Les dossiers d'un projet Nuxt 4 et le rôle de chacun.","md","nuxt",{},[518,519,520,521,522,523,364,524],"arborescence","dossiers","app","server","shared","public","Nuxt 4",true,"debutant","\u002Fnuxt\u002Fstructure",[529],"\u002Fnuxt\u002Fintroduction",[531],{"nom":532,"url":533,"type":534,"anglais":525},"Documentation officielle de Nuxt","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fgetting-started\u002Fintroduction","doc",{"title":5,"description":513},[537,540,543],{"nom":538,"url":539},"Structure des dossiers (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fdirectory-structure",{"nom":541,"url":542},"Dossier server (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fserver",{"nom":544,"url":545},"Dossier shared (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fshared","nuxt\u002F02.structure","m9rPy3tErQZJo9wlsENdca1d1astroQ_QExzn7Wi8QE",[549,552,553,557,561,565,569,573],{"path":529,"title":550,"stem":551},"Introduction à Nuxt","nuxt\u002F01.introduction",{"path":527,"title":5,"stem":546},{"path":554,"title":555,"stem":556},"\u002Fnuxt\u002Fpages-et-routage","Pages et routage","nuxt\u002F03.pages-et-routage",{"path":558,"title":559,"stem":560},"\u002Fnuxt\u002Fcomposants","Les composants","nuxt\u002F04.composants",{"path":562,"title":563,"stem":564},"\u002Fnuxt\u002Frecuperer-des-donnees","Récupérer des données","nuxt\u002F05.recuperer-des-donnees",{"path":566,"title":567,"stem":568},"\u002Fnuxt\u002Froutes-api","Les routes API","nuxt\u002F06.routes-api",{"path":570,"title":571,"stem":572},"\u002Fnuxt\u002Fmodes-de-rendu","Les modes de rendu","nuxt\u002F07.modes-de-rendu",{"path":574,"title":575,"stem":576},"\u002Fnuxt","Nuxt","nuxt\u002Findex",[578,580],{"title":550,"path":529,"stem":551,"description":579,"children":-1},"Ce que Nuxt ajoute à Vue, quand l'utiliser, et comment créer ton premier projet.",{"title":555,"path":554,"stem":556,"description":581,"children":-1},"Créer des pages, des adresses dynamiques comme \u002Frecettes\u002F12, des liens sans rechargement et des gabarits communs.",[583],{"path":529,"title":550,"ligne":515},[585,586,587,588,589,591,592,593],{"path":529,"title":550,"niveau":526,"stem":551},{"path":527,"title":5,"niveau":526,"stem":546},{"path":554,"title":555,"niveau":526,"stem":556},{"path":558,"title":559,"niveau":526,"stem":560},{"path":562,"title":563,"niveau":590,"stem":564},"intermediaire",{"path":566,"title":567,"niveau":590,"stem":568},{"path":570,"title":571,"niveau":590,"stem":572},{"path":574,"title":575,"niveau":594,"stem":576},"memo",1794583439798]