Module 1 : Introduction à NuxtJS v3 et environnement de développement

Résumé introductif du module

Ce premier module a pour objectif de vous familiariser avec les atouts et les nouveautés de NuxtJS v3, conçu pour optimiser le développement d’applications Vue.js. Vous apprendrez à installer et configurer votre environnement, depuis Node.js jusqu’à l’outil en ligne de commande nuxi. À l’issue de ce module, vous serez en mesure de générer et lancer un projet NuxtJS fonctionnel, posant des bases solides pour la suite de la formation. Nous adopterons un approche pas à pas, adaptée à votre profil de reconversion professionnelle, afin de maximiser votre compréhension et votre autonomie.

Chapitre 1 : Présentation et spécificités de NuxtJS v3

NuxtJS v3 se positionne comme un framework de haut niveau bâti sur Vue.js 3 et Vite, offrant un gain de performances, une expérience de développement optimisée et une architecture modulaire. Contrairement à NuxtJS v2, la version 3 adopte TypeScript nativement, ce qui améliore la robustesse et l’autocomplétion dans votre éditeur. L’intégration de Vite comme bundler par défaut réduit considérablement le temps de démarrage et de recompilation, rendant le workflow plus fluide. Vous bénéficierez également du nouveau système de rendu Server-Side Rendering (SSR) à la demande ou du rendu statique (SSG), configurables simplement via le fichier nuxt.config.ts. Enfin, la modularité accrue vous permet d’ajouter des fonctionnalités (authentification, internationalisation, analytics) via un écosystème de modules officiels et communautaires, tout en gardant un cœur de projet léger et performant.

Chapitre 2 : Installation et configuration de Node.js et des gestionnaires de paquets

Avant de démarrer avec NuxtJS v3, il est crucial de disposer d’une version stable de Node.js (minimum v16 LTS). Nous installerons Node.js via le gestionnaire de version nvm pour faciliter les mises à jour et les basculements entre versions. Une fois Node.js en place, vous choisirez entre npm ou yarn selon votre préférence : npm s’installe automatiquement avec Node.js, tandis que yarn peut être ajouté globalement pour bénéficier d’une mise en cache améliorée et d’une vitesse accrue lors de l’installation des dépendances. Vous apprendrez à configurer les proxies HTTP, les registries privées et les scripts personnalisés dans votre package.json. Nous expliquerons également l’usage des fichiers .npmrc ou .yarnrc.yml pour gérer les tokens d’accès ou forcer des résolutions de versions spécifiques, garantissant un environnement reproductible et stable pour tous vos projets.

Chapitre 3 : Création et lancement d’un premier projet NuxtJS v3 avec nuxi

L’outil en ligne de commande nuxi est le point de départ pour générer et gérer vos projets NuxtJS v3. Nous commencerons par installer nuxi globalement (npm install -g nuxi ou yarn global add nuxi), puis nous initierons un projet via la commande nuxi init mon-projet. Cette étape crée une arborescence standard (dossiers pages, components, assets, plugins et nuxt.config.ts). Vous apprendrez à naviguer dans cette structure, à lancer le serveur de développement avec npm run dev et à interpréter les logs de compilation. Nous détaillerons la configuration initiale dans nuxt.config.ts (choix du mode SSR ou SSG, configuration des métadonnées SEO, dossiers statiques) et vous montrons comment créer votre première page dynamiquement via le système de routage basé sur la convention de fichiers. En conclusion, vous disposerez d’une application prête à être enrichie par vos propres composants et modules.