Structure d’un projet Nuxt 3 et routage fondé sur les fichiers
Import automatique de pages/, layouts/ et components/, nommage des fichiers pour les routes imbriquées et routes globales
Structure d’un projet Nuxt 3 et routage fondé sur les fichiers est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Qu’est-ce que Nuxt 3 ?
Nuxt 3 est un méta-framework construit sur Vue 3. Il ajoute le rendu côté serveur, le routage fondé sur les fichiers, les importations automatiques et un moteur serveur, afin que vous puissiez créer des applications Vue complètes avec presque aucune configuration.
Le répertoire pages
Le répertoire pages/ pilote le routage. Chaque fichier .vue devient automatiquement une route : aucune configuration manuelle du routeur n’est nécessaire. pages/about.vue correspond à /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactActiver le routeur
Le routeur s’active dès qu’un répertoire pages/ existe. Ajoutez <NuxtPage /> dans app.vue pour afficher la page correspondante.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Routes imbriquées
Les dossiers créent des chemins imbriqués. pages/blog/index.vue sert /blog et pages/blog/archive.vue sert /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveSegments dynamiques avec [id]
Entourez un nom de fichier de crochets pour créer un segment dynamique. pages/users/[id].vue correspond à /users/42 et expose id comme paramètre de route.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Attrape-tout avec [...slug]
La forme étendue [...slug].vue est un attrape-tout. Elle correspond à une profondeur de chemin quelconque et convient parfaitement au contenu CMS ou à la gestion personnalisée des erreurs 404.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Répertoire layouts
Le dossier layouts/ contient des composants enveloppes partagés entre les pages : en-têtes, barres latérales et pieds de page. layouts/default.vue enveloppe chaque page, sauf indication contraire.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Choisir une mise en page
Une page choisit une mise en page avec definePageMeta. L’emplacement réservé dans la mise en page affiche le contenu de la page.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Composants importés automatiquement
Tout ce qui se trouve dans components/ est importé automatiquement : aucune instruction d’importation n’est nécessaire. Les dossiers imbriqués préfixent le nom : components/base/Button.vue devient <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Composables importés automatiquement
Le répertoire composables/ est lui aussi importé automatiquement. Les fonctions qui y sont exportées, ainsi que les fonctionnalités intégrées à Nuxt comme useFetch, sont utilisables partout sans importation.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingAutres répertoires importants
Nuxt définit également plugins/ (exécutés au démarrage), middleware/ (garde-fous de route), server/ (API et logique serveur) et public/ (ressources statiques servies telles quelles).
Vérification rapide
Vérifiez vos connaissances sur la structure et le routage de Nuxt.
Récapitulatif
Vous avez découvert la structure de Nuxt :
- pages/ fournit le routage fondé sur les fichiers ; les dossiers imbriquent les routes.
- [id] est un segment dynamique, tandis que [...slug] est un attrape-tout.
- layouts/ enveloppe les pages ; la mise en page est choisie avec definePageMeta.
- components/ et composables/ sont importés automatiquement.
Questions Fréquemment Posées
La leçon « Structure d’un projet Nuxt 3 et routage fondé sur les fichiers » est-elle gratuite ?
Oui — le texte complet de « Structure d’un projet Nuxt 3 et routage fondé sur les fichiers » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Structure d’un projet Nuxt 3 et routage fondé sur les fichiers » ?
Import automatique de pages/, layouts/ et components/, nommage des fichiers pour les routes imbriquées et routes globales Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Structure d’un projet Nuxt 3 et routage fondé sur les fichiers » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Structure d’un projet Nuxt 3 et routage fondé sur les fichiers
- Récupération des données : useFetch et useAsyncData
- Routes serveur et points de terminaison d’API Nuxt
- Modes SSR, SSG et SPA