La structure d'un projet
Ce que tu vas apprendre
- Les quatre zones d'un projet Nuxt 4 :
app/,server/,shared/etpublic/. - Le rôle de chaque dossier de
app/. - Où ranger chaque fichier de ton site de recettes.
Une structure fixe
Dans Nuxt, l'emplacement d'un fichier a un sens. Un fichier dans app/pages/ devient une page. Un fichier dans server/api/ devient une route d'API. Si tu ranges un fichier au mauvais endroit, Nuxt ne le trouve pas.
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.
app/
Tout ce qui tourne dans le navigateur (et au premier rendu sur le serveur) : l’interface.
- Interface (navigateur)
- Serveur uniquement
- Partagé ou public
- Configuration
Le dossier app/ : l'interface
Tout ce qui s'affiche dans le navigateur vit dans app/.
| Dossier ou fichier | Rôle |
|---|---|
app.vue | Le composant racine, qui englobe tout le site. |
pages/ | Une page par fichier. Le chemin du fichier donne l'adresse. |
components/ | Tes composants Vue, importés automatiquement. |
composables/ | Tes fonctions réutilisables useXxx, importées automatiquement. |
layouts/ | Les gabarits de page : en-tête, pied de page, menu. |
middleware/ | Du code lancé avant d'afficher une page, par exemple pour vérifier une connexion. |
plugins/ | Du code lancé au démarrage de l'application. |
utils/ | Des fonctions utilitaires, importées automatiquement. |
assets/ | Le CSS, les polices et les images traités par l'outil de build. |
app.config.ts | Des réglages publics de l'interface, comme le nom du site. |
error.vue | La page affichée en cas d'erreur, par exemple une 404. |
spa-loading-template.html | L'écran de chargement affiché quand le rendu se fait uniquement dans le navigateur. |
Tu n'as pas besoin de tous ces dossiers. Crée-les quand tu en as l'usage.
app.config.ts est envoyé au navigateur. N'y mets jamais de mot de passe ni de clé d'API.Le dossier server/ : le serveur
Le code de server/ tourne uniquement sur le serveur. Le navigateur ne le reçoit jamais.
| Dossier | Rôle |
|---|---|
server/api/ | Les routes d'API, servies sous /api/.... |
server/routes/ | Des routes serveur sans le préfixe /api. |
server/middleware/ | Du code lancé à chaque requête reçue par le serveur. |
server/plugins/ | Du code lancé au démarrage du serveur. |
server/utils/ | Des fonctions utilitaires pour le serveur. |
Le dossier shared/ : le code commun
shared/ 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.
Le dossier public/ : les fichiers bruts
Les fichiers de public/ sont servis tels quels, à la racine du site. public/favicon.ico répond à l'adresse /favicon.ico. Nuxt ne les transforme pas.
La différence avec app/assets/ : un fichier de assets/ passe par l'outil de build, qui peut le compresser ou le renommer. Un fichier de public/ reste intact.
Le fichier nuxt.config.ts
À la racine, nuxt.config.ts règle le projet : les modules installés, la configuration privée, les modes de rendu.
export default defineNuxtConfig({
modules: [],
devtools: { enabled: true }
})
Tu y reviendras dans les chapitres sur les routes API et les modes de rendu.
.nuxt/ et .output/ sont générés par Nuxt. Ne les modifie pas à la main : ils sont recréés à chaque lancement ou à chaque build.Ton site de recettes
Voici où iront les fichiers du fil rouge :
mon-site/
├─ app/
│ ├─ app.vue
│ ├─ components/
│ │ └─ CarteRecette.vue
│ ├─ layouts/
│ │ └─ default.vue
│ └─ pages/
│ ├─ index.vue
│ └─ recettes/
│ └─ [id].vue
├─ server/
│ └─ api/
│ └─ recettes/
│ ├─ index.get.ts
│ └─ [id].get.ts
├─ shared/
│ └─ types/
│ └─ recette.ts
├─ public/
│ └─ favicon.ico
└─ nuxt.config.ts
À retenir
app/contient l'interface,server/le code serveur,shared/le code commun aux deux.- L'emplacement d'un fichier décide de son rôle : une page, un composant, une route d'API.
public/sert les fichiers tels quels,assets/les fait passer par le build.nuxt.config.tsrègle tout le projet.
Pour aller plus loin
Sources officielles
Ensuite
Introduction à Nuxt
Ce que Nuxt ajoute à Vue, quand l'utiliser, et comment créer ton premier projet.
Pages et routage
Créer des pages, des adresses dynamiques comme /recettes/12, des liens sans rechargement et des gabarits communs.
- Projet
- Lignes de code
- Niveau
- Toit-terrasse
- Appartement
- Nuxt
- Pièce
- 2/8
- Plan n°
- nuxt/02.structure