[{"data":1,"prerenderedAt":988},["ShallowReactive",2],{"page-\u002Fnuxt\u002Fcomposants":3,"pieces-nuxt":941,"autour-\u002Fnuxt\u002Fcomposants":970,"prerequis-\u002Fnuxt\u002Fcomposants":975,"plan-nuxt":977},{"id":4,"title":5,"body":6,"description":911,"extension":912,"ligne":913,"meta":914,"motsCles":915,"navigation":313,"niveau":919,"path":920,"prerequis":921,"ressources":923,"seo":932,"sources":933,"stem":939,"__hash__":940},"docs\u002Fnuxt\u002F04.composants.md","Les composants",{"type":7,"value":8,"toc":900},"minimark",[9,14,35,39,47,122,129,133,136,191,194,198,210,400,411,415,421,527,572,576,583,643,662,666,673,783,787,798,818,845,856,860,896],[10,11,13],"h2",{"id":12},"ce-que-tu-vas-apprendre","Ce que tu vas apprendre",[15,16,17,26,29,32],"ul",{},[18,19,20,21,25],"li",{},"Créer un composant et l'utiliser sans ",[22,23,24],"code",{},"import",".",[18,27,28],{},"Comment Nuxt nomme les composants rangés dans des sous-dossiers.",[18,30,31],{},"Passer des données à un composant, et en recevoir.",[18,33,34],{},"Charger un composant seulement quand il sert, ou seulement dans le navigateur.",[10,36,38],{"id":37},"un-composant-sans-import","Un composant, sans import",[40,41,42,43,46],"p",{},"Sur ta page de recettes, chaque recette s'affiche dans une carte. Tu crées le fichier ",[22,44,45],{},"app\u002Fcomponents\u002FCarteRecette.vue",", et tu l'utilises directement dans n'importe quelle page :",[48,49,55],"pre",{"className":50,"code":51,"filename":52,"language":53,"meta":54,"style":54},"language-vue shiki shiki-themes github-light-default github-dark-default github-dark-default","\u003Ctemplate>\n  \u003CCarteRecette titre=\"Crêpes\" :duree=\"20\" \u002F>\n\u003C\u002Ftemplate>\n","app\u002Fpages\u002Frecettes\u002Findex.vue","vue","",[22,56,57,73,112],{"__ignoreMap":54},[58,59,62,66,70],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"scfrF","\u003C",[58,67,69],{"class":68},"s5JFL","template",[58,71,72],{"class":64},">\n",[58,74,76,79,82,86,89,93,96,99,101,104,107,109],{"class":60,"line":75},2,[58,77,78],{"class":64},"  \u003C",[58,80,81],{"class":68},"CarteRecette",[58,83,85],{"class":84},"s5iOY"," titre",[58,87,88],{"class":64},"=",[58,90,92],{"class":91},"shWOn","\"Crêpes\"",[58,94,95],{"class":64}," :",[58,97,98],{"class":84},"duree",[58,100,88],{"class":64},[58,102,103],{"class":64},"\"",[58,105,106],{"class":84},"20",[58,108,103],{"class":64},[58,110,111],{"class":64}," \u002F>\n",[58,113,115,118,120],{"class":60,"line":114},3,[58,116,117],{"class":64},"\u003C\u002F",[58,119,69],{"class":68},[58,121,72],{"class":64},[40,123,124,125,128],{},"Avec Vue seul, il faudrait écrire ",[22,126,127],{},"import CarteRecette from '...'",". Nuxt le fait pour toi, et n'inclut dans le site que les composants réellement utilisés.",[10,130,132],{"id":131},"les-sous-dossiers-donnent-le-nom","Les sous-dossiers donnent le nom",[40,134,135],{},"Quand tu ranges un composant dans un sous-dossier, le nom du dossier devient le début du nom du composant :",[137,138,139,152],"table",{},[140,141,142],"thead",{},[143,144,145,149],"tr",{},[146,147,148],"th",{},"Fichier",[146,150,151],{},"Nom à utiliser",[153,154,155,167,179],"tbody",{},[143,156,157,162],{},[158,159,160],"td",{},[22,161,45],{},[158,163,164],{},[22,165,166],{},"\u003CCarteRecette \u002F>",[143,168,169,174],{},[158,170,171],{},[22,172,173],{},"app\u002Fcomponents\u002Frecette\u002FCarte.vue",[158,175,176],{},[22,177,178],{},"\u003CRecetteCarte \u002F>",[143,180,181,186],{},[158,182,183],{},[22,184,185],{},"app\u002Fcomponents\u002Frecette\u002FIngredients.vue",[158,187,188],{},[22,189,190],{},"\u003CRecetteIngredients \u002F>",[40,192,193],{},"Tu peux ainsi regrouper tous les composants d'une même partie du site, sans noms à rallonge dans les fichiers.",[10,195,197],{"id":196},"passer-des-données-les-props","Passer des données : les props",[40,199,200,201,205,206,209],{},"Un composant reçoit des données de son parent par des ",[202,203,204],"strong",{},"props",". Tu les déclares avec ",[22,207,208],{},"defineProps",", et TypeScript vérifie que le parent envoie les bons types :",[48,211,213],{"className":50,"code":212,"filename":45,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\nconst props = defineProps\u003C{\n  titre: string\n  duree: number\n  vegetarien?: boolean \u002F\u002F le ? rend la prop facultative\n}>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Carticle>\n    \u003Ch2>{{ titre }}\u003C\u002Fh2>\n    \u003Cp>{{ duree }} min \u003Cspan v-if=\"vegetarien\">· végétarien\u003C\u002Fspan>\u003C\u002Fp>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n",[22,214,215,235,254,266,277,293,299,308,315,324,334,349,381,391],{"__ignoreMap":54},[58,216,217,219,222,225,228,230,233],{"class":60,"line":61},[58,218,65],{"class":64},[58,220,221],{"class":68},"script",[58,223,224],{"class":84}," setup",[58,226,227],{"class":84}," lang",[58,229,88],{"class":64},[58,231,232],{"class":91},"\"ts\"",[58,234,72],{"class":64},[58,236,237,241,244,247,251],{"class":60,"line":75},[58,238,240],{"class":239},"sOnC1","const",[58,242,243],{"class":84}," props",[58,245,246],{"class":239}," =",[58,248,250],{"class":249},"syCW7"," defineProps",[58,252,253],{"class":64},"\u003C{\n",[58,255,256,260,263],{"class":60,"line":114},[58,257,259],{"class":258},"sIXEE","  titre",[58,261,262],{"class":239},":",[58,264,265],{"class":84}," string\n",[58,267,269,272,274],{"class":60,"line":268},4,[58,270,271],{"class":258},"  duree",[58,273,262],{"class":239},[58,275,276],{"class":84}," number\n",[58,278,280,283,286,289],{"class":60,"line":279},5,[58,281,282],{"class":258},"  vegetarien",[58,284,285],{"class":239},"?:",[58,287,288],{"class":84}," boolean",[58,290,292],{"class":291},"sd6ml"," \u002F\u002F le ? rend la prop facultative\n",[58,294,296],{"class":60,"line":295},6,[58,297,298],{"class":64},"}>()\n",[58,300,302,304,306],{"class":60,"line":301},7,[58,303,117],{"class":64},[58,305,221],{"class":68},[58,307,72],{"class":64},[58,309,311],{"class":60,"line":310},8,[58,312,314],{"emptyLinePlaceholder":313},true,"\n",[58,316,318,320,322],{"class":60,"line":317},9,[58,319,65],{"class":64},[58,321,69],{"class":68},[58,323,72],{"class":64},[58,325,327,329,332],{"class":60,"line":326},10,[58,328,78],{"class":64},[58,330,331],{"class":68},"article",[58,333,72],{"class":64},[58,335,337,340,342,345,347],{"class":60,"line":336},11,[58,338,339],{"class":64},"    \u003C",[58,341,10],{"class":68},[58,343,344],{"class":64},">{{ titre }}\u003C\u002F",[58,346,10],{"class":68},[58,348,72],{"class":64},[58,350,352,354,356,359,361,364,366,369,372,374,377,379],{"class":60,"line":351},12,[58,353,339],{"class":64},[58,355,40],{"class":68},[58,357,358],{"class":64},">{{ duree }} min \u003C",[58,360,58],{"class":68},[58,362,363],{"class":84}," v-if",[58,365,88],{"class":64},[58,367,368],{"class":91},"\"vegetarien\"",[58,370,371],{"class":64},">· végétarien\u003C\u002F",[58,373,58],{"class":68},[58,375,376],{"class":64},">\u003C\u002F",[58,378,40],{"class":68},[58,380,72],{"class":64},[58,382,384,387,389],{"class":60,"line":383},13,[58,385,386],{"class":64},"  \u003C\u002F",[58,388,331],{"class":68},[58,390,72],{"class":64},[58,392,394,396,398],{"class":60,"line":393},14,[58,395,117],{"class":64},[58,397,69],{"class":68},[58,399,72],{"class":64},[40,401,402,403,406,407,410],{},"Dans le parent, ",[22,404,405],{},":duree=\"20\""," (avec les deux-points) envoie le nombre 20. Sans les deux-points, ",[22,408,409],{},"duree=\"20\""," enverrait le texte « 20 ».",[10,412,414],{"id":413},"remonter-une-information-les-événements","Remonter une information : les événements",[40,416,417,418,95],{},"Les props descendent du parent vers l'enfant. Pour prévenir le parent (un clic sur « Ajouter aux favoris »), l'enfant émet un ",[202,419,420],{},"événement",[48,422,424],{"className":50,"code":423,"filename":45,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\nconst emit = defineEmits\u003C{ favori: [id: number] }>()\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"emit('favori', 12)\">Ajouter aux favoris\u003C\u002Fbutton>\n\u003C\u002Ftemplate>\n",[22,425,426,442,477,485,489,497,519],{"__ignoreMap":54},[58,427,428,430,432,434,436,438,440],{"class":60,"line":61},[58,429,65],{"class":64},[58,431,221],{"class":68},[58,433,224],{"class":84},[58,435,227],{"class":84},[58,437,88],{"class":64},[58,439,232],{"class":91},[58,441,72],{"class":64},[58,443,444,446,449,451,454,457,460,462,465,468,471,474],{"class":60,"line":75},[58,445,240],{"class":239},[58,447,448],{"class":84}," emit",[58,450,246],{"class":239},[58,452,453],{"class":249}," defineEmits",[58,455,456],{"class":64},"\u003C{ ",[58,458,459],{"class":258},"favori",[58,461,262],{"class":239},[58,463,464],{"class":64}," [",[58,466,467],{"class":258},"id",[58,469,470],{"class":64},": ",[58,472,473],{"class":84},"number",[58,475,476],{"class":64},"] }>()\n",[58,478,479,481,483],{"class":60,"line":114},[58,480,117],{"class":64},[58,482,221],{"class":68},[58,484,72],{"class":64},[58,486,487],{"class":60,"line":268},[58,488,314],{"emptyLinePlaceholder":313},[58,490,491,493,495],{"class":60,"line":279},[58,492,65],{"class":64},[58,494,69],{"class":68},[58,496,72],{"class":64},[58,498,499,501,504,507,509,512,515,517],{"class":60,"line":295},[58,500,78],{"class":64},[58,502,503],{"class":68},"button",[58,505,506],{"class":84}," @click",[58,508,88],{"class":64},[58,510,511],{"class":91},"\"emit('favori', 12)\"",[58,513,514],{"class":64},">Ajouter aux favoris\u003C\u002F",[58,516,503],{"class":68},[58,518,72],{"class":64},[58,520,521,523,525],{"class":60,"line":301},[58,522,117],{"class":64},[58,524,69],{"class":68},[58,526,72],{"class":64},[48,528,530],{"className":50,"code":529,"language":53,"meta":54,"style":54},"\u003CCarteRecette titre=\"Crêpes\" :duree=\"20\" @favori=\"ajouterFavori\" \u002F>\n",[22,531,532],{"__ignoreMap":54},[58,533,534,536,538,540,542,544,546,548,550,552,554,556,559,561,563,565,568,570],{"class":60,"line":61},[58,535,65],{"class":64},[58,537,81],{"class":68},[58,539,85],{"class":84},[58,541,88],{"class":64},[58,543,92],{"class":91},[58,545,95],{"class":64},[58,547,98],{"class":84},[58,549,88],{"class":64},[58,551,103],{"class":64},[58,553,106],{"class":84},[58,555,103],{"class":64},[58,557,558],{"class":64}," @",[58,560,459],{"class":84},[58,562,88],{"class":64},[58,564,103],{"class":64},[58,566,567],{"class":64},"ajouterFavori",[58,569,103],{"class":64},[58,571,111],{"class":64},[10,573,575],{"id":574},"insérer-du-contenu-les-slots","Insérer du contenu : les slots",[40,577,578,579,582],{},"Un ",[22,580,581],{},"\u003Cslot \u002F>"," laisse le parent glisser son propre contenu dans le composant. C'est le même mécanisme que pour les gabarits du chapitre précédent :",[48,584,587],{"className":50,"code":585,"filename":586,"language":53,"meta":54,"style":54},"\u003Ctemplate>\n  \u003Cdiv class=\"encadre\">\n    \u003Cslot \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","app\u002Fcomponents\u002FEncadre.vue",[22,588,589,597,614,627,635],{"__ignoreMap":54},[58,590,591,593,595],{"class":60,"line":61},[58,592,65],{"class":64},[58,594,69],{"class":68},[58,596,72],{"class":64},[58,598,599,601,604,607,609,612],{"class":60,"line":75},[58,600,78],{"class":64},[58,602,603],{"class":68},"div",[58,605,606],{"class":84}," class",[58,608,88],{"class":64},[58,610,611],{"class":91},"\"encadre\"",[58,613,72],{"class":64},[58,615,616,618,621,625],{"class":60,"line":114},[58,617,339],{"class":64},[58,619,620],{"class":68},"slot",[58,622,624],{"class":623},"st2BK"," \u002F",[58,626,72],{"class":64},[58,628,629,631,633],{"class":60,"line":268},[58,630,386],{"class":64},[58,632,603],{"class":68},[58,634,72],{"class":64},[58,636,637,639,641],{"class":60,"line":279},[58,638,117],{"class":64},[58,640,69],{"class":68},[58,642,72],{"class":64},[48,644,646],{"className":50,"code":645,"language":53,"meta":54,"style":54},"\u003CEncadre>Astuce : laisse reposer la pâte une heure.\u003C\u002FEncadre>\n",[22,647,648],{"__ignoreMap":54},[58,649,650,652,655,658,660],{"class":60,"line":61},[58,651,65],{"class":64},[58,653,654],{"class":68},"Encadre",[58,656,657],{"class":64},">Astuce : laisse reposer la pâte une heure.\u003C\u002F",[58,659,654],{"class":68},[58,661,72],{"class":64},[10,663,665],{"id":664},"charger-à-la-demande","Charger à la demande",[40,667,668,669,672],{},"Certains composants sont lourds (une carte, un éditeur) et ne servent pas tout de suite. Ajoute le préfixe ",[22,670,671],{},"Lazy"," devant le nom : leur code n'est téléchargé que lorsqu'ils s'affichent.",[48,674,676],{"className":50,"code":675,"language":53,"meta":54,"style":54},"\u003Cscript setup lang=\"ts\">\nconst afficherCommentaires = ref(false)\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cbutton @click=\"afficherCommentaires = true\">Voir les commentaires\u003C\u002Fbutton>\n  \u003CLazyRecetteCommentaires v-if=\"afficherCommentaires\" \u002F>\n\u003C\u002Ftemplate>\n",[22,677,678,694,715,723,727,735,755,775],{"__ignoreMap":54},[58,679,680,682,684,686,688,690,692],{"class":60,"line":61},[58,681,65],{"class":64},[58,683,221],{"class":68},[58,685,224],{"class":84},[58,687,227],{"class":84},[58,689,88],{"class":64},[58,691,232],{"class":91},[58,693,72],{"class":64},[58,695,696,698,701,703,706,709,712],{"class":60,"line":75},[58,697,240],{"class":239},[58,699,700],{"class":84}," afficherCommentaires",[58,702,246],{"class":239},[58,704,705],{"class":249}," ref",[58,707,708],{"class":64},"(",[58,710,711],{"class":84},"false",[58,713,714],{"class":64},")\n",[58,716,717,719,721],{"class":60,"line":114},[58,718,117],{"class":64},[58,720,221],{"class":68},[58,722,72],{"class":64},[58,724,725],{"class":60,"line":268},[58,726,314],{"emptyLinePlaceholder":313},[58,728,729,731,733],{"class":60,"line":279},[58,730,65],{"class":64},[58,732,69],{"class":68},[58,734,72],{"class":64},[58,736,737,739,741,743,745,748,751,753],{"class":60,"line":295},[58,738,78],{"class":64},[58,740,503],{"class":68},[58,742,506],{"class":84},[58,744,88],{"class":64},[58,746,747],{"class":91},"\"afficherCommentaires = true\"",[58,749,750],{"class":64},">Voir les commentaires\u003C\u002F",[58,752,503],{"class":68},[58,754,72],{"class":64},[58,756,757,759,762,764,766,768,771,773],{"class":60,"line":301},[58,758,78],{"class":64},[58,760,761],{"class":68},"LazyRecetteCommentaires",[58,763,363],{"class":239},[58,765,88],{"class":64},[58,767,103],{"class":64},[58,769,770],{"class":64},"afficherCommentaires",[58,772,103],{"class":64},[58,774,111],{"class":64},[58,776,777,779,781],{"class":60,"line":310},[58,778,117],{"class":64},[58,780,69],{"class":68},[58,782,72],{"class":64},[10,784,786],{"id":785},"seulement-dans-le-navigateur","Seulement dans le navigateur",[40,788,789,790,793,794,797],{},"Par défaut, Nuxt affiche aussi tes composants sur le serveur. Un composant qui utilise ",[22,791,792],{},"window"," ou ",[22,795,796],{},"localStorage"," plante alors, car ces objets n'existent que dans le navigateur. Deux solutions :",[15,799,800,811],{},[18,801,802,803,806,807,810],{},"nommer le fichier avec ",[22,804,805],{},".client.vue"," (par exemple ",[22,808,809],{},"Minuteur.client.vue",") : il ne s'affiche que dans le navigateur ;",[18,812,813,814,817],{},"entourer le composant de ",[22,815,816],{},"\u003CClientOnly>"," dans le parent.",[48,819,821],{"className":50,"code":820,"language":53,"meta":54,"style":54},"\u003CClientOnly>\n  \u003CMinuteur \u002F>\n\u003C\u002FClientOnly>\n",[22,822,823,832,837],{"__ignoreMap":54},[58,824,825,827,830],{"class":60,"line":61},[58,826,65],{"class":64},[58,828,829],{"class":68},"ClientOnly",[58,831,72],{"class":64},[58,833,834],{"class":60,"line":75},[58,835,836],{"class":64},"  \u003CMinuteur \u002F>\n",[58,838,839,841,843],{"class":60,"line":114},[58,840,117],{"class":64},[58,842,829],{"class":68},[58,844,72],{"class":64},[846,847,848],"tip",{},[40,849,850,851,853,854,25],{},"Ce site s'en sert : les favoris sont lus dans le ",[22,852,796],{},", donc le bouton favori est entouré de ",[22,855,816],{},[10,857,859],{"id":858},"à-retenir","À retenir",[15,861,862,872,884,889],{},[18,863,864,865,868,869,871],{},"Un fichier de ",[22,866,867],{},"app\u002Fcomponents\u002F"," s'utilise sans ",[22,870,24],{}," ; le sous-dossier préfixe le nom.",[18,873,874,876,877,880,881,883],{},[22,875,208],{}," reçoit les données du parent, ",[22,878,879],{},"defineEmits"," lui envoie des événements, ",[22,882,581],{}," accueille son contenu.",[18,885,886,888],{},[22,887,671],{}," devant un nom charge le composant à la demande.",[18,890,891,793,893,895],{},[22,892,805],{},[22,894,816],{}," pour un composant qui a besoin du navigateur.",[897,898,899],"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 .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 .sIXEE, html code.shiki .sIXEE{--shiki-light:#953800;--shiki-default:#FFA657;--shiki-dark:#FFA657}html pre.shiki code .sd6ml, html code.shiki .sd6ml{--shiki-light:#6E7781;--shiki-default:#8B949E;--shiki-dark:#8B949E}html pre.shiki code .st2BK, html code.shiki .st2BK{--shiki-light:#82071E;--shiki-light-font-style:italic;--shiki-default:#FFA198;--shiki-default-font-style:italic;--shiki-dark:#FFA198;--shiki-dark-font-style:italic}",{"title":54,"searchDepth":75,"depth":114,"links":901},[902,903,904,905,906,907,908,909,910],{"id":12,"depth":75,"text":13},{"id":37,"depth":75,"text":38},{"id":131,"depth":75,"text":132},{"id":196,"depth":75,"text":197},{"id":413,"depth":75,"text":414},{"id":574,"depth":75,"text":575},{"id":664,"depth":75,"text":665},{"id":785,"depth":75,"text":786},{"id":858,"depth":75,"text":859},"Découper l'interface en composants importés automatiquement, leur passer des données et charger les plus lourds à la demande.","md","nuxt",{},[916,917,204,208,918,620,671,829,805],"composants","auto-imports","emits","debutant","\u002Fnuxt\u002Fcomposants",[922],"\u002Fnuxt\u002Fpages-et-routage",[924,928],{"nom":925,"url":926,"type":927},"Les bases des composants dans le guide de Vue","https:\u002F\u002Ffr.vuejs.org\u002Fguide\u002Fessentials\u002Fcomponent-basics.html","doc",{"nom":929,"url":930,"type":931},"Tutoriel interactif de Vue","https:\u002F\u002Ffr.vuejs.org\u002Ftutorial\u002F","exercice",{"title":5,"description":911},[934,937],{"nom":935,"url":936},"Dossier components (en anglais)","https:\u002F\u002Fnuxt.com\u002Fdocs\u002F4.x\u002Fdirectory-structure\u002Fapp\u002Fcomponents",{"nom":938,"url":926},"Les bases des composants (Vue, en français)","nuxt\u002F04.composants","EPxkrfCjJ_eqG6HIw8Vh73a16aFns32Eu-pimIc02lc",[942,946,950,953,954,958,962,966],{"path":943,"title":944,"stem":945},"\u002Fnuxt\u002Fintroduction","Introduction à Nuxt","nuxt\u002F01.introduction",{"path":947,"title":948,"stem":949},"\u002Fnuxt\u002Fstructure","La structure d'un projet","nuxt\u002F02.structure",{"path":922,"title":951,"stem":952},"Pages et routage","nuxt\u002F03.pages-et-routage",{"path":920,"title":5,"stem":939},{"path":955,"title":956,"stem":957},"\u002Fnuxt\u002Frecuperer-des-donnees","Récupérer des données","nuxt\u002F05.recuperer-des-donnees",{"path":959,"title":960,"stem":961},"\u002Fnuxt\u002Froutes-api","Les routes API","nuxt\u002F06.routes-api",{"path":963,"title":964,"stem":965},"\u002Fnuxt\u002Fmodes-de-rendu","Les modes de rendu","nuxt\u002F07.modes-de-rendu",{"path":967,"title":968,"stem":969},"\u002Fnuxt","Nuxt","nuxt\u002Findex",[971,973],{"title":951,"path":922,"stem":952,"description":972,"children":-1},"Créer des pages, des adresses dynamiques comme \u002Frecettes\u002F12, des liens sans rechargement et des gabarits communs.",{"title":956,"path":955,"stem":957,"description":974,"children":-1},"Charger des données avec useFetch, gérer le chargement et les erreurs, et savoir quand utiliser $fetch.",[976],{"path":922,"title":951,"ligne":913},[978,979,980,981,982,984,985,986],{"path":943,"title":944,"niveau":919,"stem":945},{"path":947,"title":948,"niveau":919,"stem":949},{"path":922,"title":951,"niveau":919,"stem":952},{"path":920,"title":5,"niveau":919,"stem":939},{"path":955,"title":956,"niveau":983,"stem":957},"intermediaire",{"path":959,"title":960,"niveau":983,"stem":961},{"path":963,"title":964,"niveau":983,"stem":965},{"path":967,"title":968,"niveau":987,"stem":969},"memo",1794583440064]