Module 3 : Structure du projet, pages et routage

Résumé introductif du module

Ce module est essentiel pour comprendre comment NuxtJS v3 organise le code et gère la navigation au sein de votre application. Nous allons explorer en profondeur l'arborescence standard d'un projet NuxtJS, qui est conçue pour optimiser le développement et la maintenabilité. Vous apprendrez à créer des pages web de manière intuitive grâce au système de routage basé sur les fichiers, et à gérer des contenus dynamiques. Enfin, nous aborderons les layouts, des gabarits réutilisables qui vous permettront de maintenir une cohérence visuelle et fonctionnelle sur l'ensemble de votre site, en séparant clairement la structure de votre contenu.

Chapitre 1 : Arborescence et convention de fichiers NuxtJS v3

L'un des atouts majeurs de NuxtJS v3 réside dans son approche basée sur la convention plutôt que sur la configuration. Cela signifie que de nombreuses fonctionnalités sont automatiquement activées ou configurées simplement en plaçant vos fichiers dans des répertoires spécifiques. Comprendre cette arborescence est fondamental pour développer efficacement avec NuxtJS. Le dossier pages/ est sans doute le plus important pour la création de votre interface utilisateur, car chaque fichier .vue que vous y placez devient automatiquement une route accessible dans votre navigateur. Par exemple, un fichier pages/about.vue créera une page accessible via l'URL /about. Pour les composants réutilisables qui ne sont pas des pages, le dossier components/ est l'endroit désigné. NuxtJS les auto-importe, ce qui signifie que vous n'avez pas besoin d'écrire des instructions import explicites dans vos fichiers de page ou de composant, simplifiant ainsi le code et réduisant les erreurs.

Le répertoire layouts/ est dédié aux gabarits de page. Un layout est un composant Vue qui enveloppe le contenu de vos pages, permettant de définir des éléments communs comme les en-têtes, les pieds de page, les barres de navigation ou les barres latérales. Le fichier layouts/default.vue est le layout par défaut appliqué à toutes les pages, sauf indication contraire. Les ressources statiques, telles que les images, les polices ou les fichiers CSS globaux, sont généralement placées dans assets/ pour les ressources qui nécessitent un traitement par le bundler (comme la minification ou l'optimisation), et dans public/ pour les fichiers qui doivent être servis directement sans traitement (par exemple, un fichier robots.txt ou un favicon.ico). Le dossier plugins/ est utilisé pour étendre les fonctionnalités de Vue.js ou de NuxtJS en y ajoutant des fonctions globales, des bibliothèques tierces ou des configurations spécifiques qui doivent être exécutées avant le montage de l'application. Enfin, modules/ est l'endroit où vous pouvez définir des modules Nuxt personnalisés ou installer des modules tiers, qui sont des extensions puissantes permettant d'ajouter des fonctionnalités complexes (comme l'authentification, la gestion d'API, etc.) de manière structurée et réutilisable. Cette organisation prédéfinie non seulement accélère le développement en réduisant la configuration manuelle, mais elle favorise également une meilleure collaboration au sein des équipes de développement en imposant une structure cohérente et prévisible pour tous les projets NuxtJS.

Chapitre 2 : Création de pages et routage basé sur les fichiers

Le système de routage de NuxtJS v3 est l'une de ses caractéristiques les plus puissantes et intuitives, reposant entièrement sur la structure de votre répertoire pages/. Contrairement à d'autres frameworks où vous devez configurer manuellement chaque route dans un fichier de routeur, NuxtJS génère automatiquement les routes en se basant sur les noms de fichiers et de dossiers que vous créez. C'est ce qu'on appelle le "file-system routing". Pour créer une page simple, il suffit de créer un fichier .vue directement dans le dossier pages/. Par exemple, si vous créez pages/contact.vue, NuxtJS générera automatiquement une route accessible à l'URL /contact. Le contenu de ce fichier .vue sera le composant affiché lorsque l'utilisateur naviguera vers cette URL.

Pour des structures de navigation plus complexes, NuxtJS prend en charge le routage imbriqué et le routage dynamique. Le routage imbriqué est réalisé en créant des sous-dossiers. Par exemple, si vous avez un blog, vous pourriez créer un dossier pages/blog/ et y placer index.vue pour la page d'accueil du blog (/blog) et [slug].vue pour les articles individuels (/blog/mon-super-article). Le [slug] est un exemple de routage dynamique. Les crochets [] indiquent à NuxtJS qu'il s'agit d'un paramètre de route variable. Ainsi, pages/users/[id].vue créera une route qui correspondra à des URL comme /users/1, /users/john-doe, etc. Le paramètre id sera alors accessible dans votre composant de page via l'objet route fourni par Vue Router, que vous pouvez obtenir en utilisant le composable useRoute() de NuxtJS. Par exemple, const route = useRoute(); console.log(route.params.id); vous donnera la valeur de l'ID dans l'URL. Ce système élimine le besoin de gérer un fichier de configuration de routeur séparé, ce qui réduit considérablement la complexité et les risques d'erreurs, tout en offrant une grande flexibilité pour construire des URL sémantiques et optimisées pour le référencement. Il est également important de noter que NuxtJS gère automatiquement les routes 404 (pages non trouvées) si aucune route ne correspond à l'URL demandée, et vous pouvez personnaliser cette page d'erreur en créant un fichier error.vue à la racine de votre projet.

Chapitre 3 : Les layouts et la navigation

Les layouts sont des composants Vue.js spéciaux dans NuxtJS v3 qui agissent comme des gabarits pour vos pages. Leur rôle principal est de définir la structure globale de votre application, y compris les éléments qui restent constants d'une page à l'autre, tels que les en-têtes, les pieds de page, les barres de navigation latérales ou les menus. En utilisant des layouts, vous évitez la répétition de code et assurez une cohérence visuelle et fonctionnelle sur l'ensemble de votre site. Le layout par défaut est layouts/default.vue. Toute page qui ne spécifie pas de layout utilisera automatiquement celui-ci. À l'intérieur d'un layout, le composant <slot /> est crucial : c'est là que le contenu de la page actuelle sera injecté. Par exemple, votre default.vue pourrait contenir un <header>, un <main><slot /></main> et un <footer>.

Pour utiliser un layout personnalisé, il suffit de créer un nouveau fichier .vue dans le dossier layouts/ (par exemple, layouts/blog.vue) et de spécifier ce layout dans la page concernée en utilisant la propriété layout dans le bloc <script setup> de votre composant de page. Par exemple : <script setup> definePageMeta({ layout: 'blog' }) </script>. Cela permet une grande flexibilité, vous pouvez avoir un layout pour les pages d'administration, un autre pour les pages publiques, et ainsi de suite. La navigation entre les pages est également simplifiée avec NuxtJS. Au lieu d'utiliser la balise <a> HTML standard, qui provoquerait un rechargement complet de la page, NuxtJS fournit le composant <NuxtLink>. Ce composant est une amélioration du <router-link> de Vue Router et est optimisé pour les applications Nuxt. Il permet une navigation côté client sans rechargement de page, ce qui offre une expérience utilisateur beaucoup plus fluide et rapide. <NuxtLink to="/about">À propos</NuxtLink> est l'exemple le plus simple. NuxtJS gère intelligemment le préchargement des ressources des pages liées, améliorant encore la performance perçue. Pour la navigation programmatique, c'est-à-dire déclencher une navigation suite à une action utilisateur (par exemple, après la soumission d'un formulaire), vous pouvez utiliser la fonction navigateTo() fournie par NuxtJS. Par exemple, navigateTo('/dashboard') redirigera l'utilisateur vers la page du tableau de bord. Cette fonction est particulièrement utile pour les redirections conditionnelles ou les flux de travail complexes. La combinaison des layouts bien structurés et d'une navigation fluide via <NuxtLink> et navigateTo() est fondamentale pour construire des applications NuxtJS robustes et performantes.