JavaScript avec Nx : Accélérez et structurez vos développements
- Durée
- Durée :3 jours
- Niveau
- Niveau :Intermédiaire
- Certification
- Certification :Non
2400€ HT
Prochaine session :
Nuxt.JS : Architecture, Performances et Déploiement
Description de la formation Nuxt js
Nuxt.js est un framework moderne basé sur Vue.js, conçu pour simplifier le développement d'applications web performantes, SEO-friendly et maintenables. Grâce à sa structure modulaire et à ses fonctionnalités intégrées (rendu côté serveur, génération statique, routing automatique, etc.), Nuxt.js s’impose comme un outil incontournable pour les développeurs front-end et full-stack.
Cette formation Nuxt.js vous permettra de maîtriser les fondamentaux du framework, de comprendre son écosystème, et de développer des applications web optimisées, scalables et bien structurées. Vous apprendrez à tirer parti des différentes capacités de Nuxt (SSR, SSG, composition API, modules) à travers des cas concrets et des ateliers pratiques.
Programme de la formation
Objectif opérationnel :
Savoir maîtriser Nuxt.js et ses fonctionnalités.
Objectifs pédagogiques :
À l'issue de cette formation Nuxt.js, vous aurez acquis les connaissances et compétences nécessaires pour :
- Maîtriser les concepts clés de Nuxt.js et identifier les avantages pratiques de son utilisation
- Configurer et gérer un projet Nuxt.js sur mesure adapté à des besoins spécifiques
- Exploiter pleinement le routage automatique pour créer des pages statiques et dynamiques optimisées
- Améliorer significativement les performances et le référencement SEO grâce au SSR, SSG et au lazy loading
- Déployer, surveiller et maintenir efficacement des applications Nuxt.js en production sur Vercel, Netlify, ou autres plateformes cloud
Jour 1 : Fondamentaux de Nuxt.js et mise en place
● Outils recommandés : Node.js, gestionnaires de paquets (NPM, PNPM), Vite comme bundler performant
● Révision rapide des fondamentaux Vue.js : gestion avancée des événements, composants modulaires, directives complexes
● Comprendre le Virtual DOM, rendu efficace des composants
● Création avancée et réutilisation de composants avec Vue/Nuxt
● Gestion experte de la communication entre composants (props, événements personnalisés, slots complexes)
● Étude comparative et recommandations concrètes selon les besoins du projet.
● Mise en pratique avancée avec reactive, ref, computed, setup, etc.
● Techniques de validation robustes et gestion optimisée des erreurs côté client
● Bonnes pratiques et patterns recommandés pour une gestion durable des formulaires
● Composables et fonctions réutilisables avancées
● Techniques avancées : téléportation, gestion dynamique des composants avec suspense et async components
● Structuration experte avec <NuxtLayout>, gestion efficace des routes automatiques avec <NuxtPage>.
● Navigation optimisée avec <NuxtChild>, gestion performante des images avec <NuxtImg> et <NuxtPicture>.
● Exploitation poussée des méthodes useFetch et useAsyncData pour intégrer des données externes
● Gestion optimisée des erreurs, états de chargement et interactions utilisateur
● Techniques modernes de génération statique (SSG) et rendu serveur (SSR)
● Optimisation SEO avancée : balises méta dynamiques, réseaux sociaux, sitemap automatique
● Lazy loading intelligent, préchargement prédictif pour performances optimales
● Tests unitaires avancés avec Vitest ou Jest : montage précis des composants, mocks complexes, couverture de code élevée
● Meilleures pratiques en tests : optimisation des suites, gestion avancée des cas d’erreurs
● Intégration experte avec Nuxt.js (Composition API)
● Stratégies sophistiquées d’invalidation, caching et performance réseau
● Plugins et modules Nuxt avancés : implémentation et optimisation
● Sécurité approfondie et gestion précise des rôles et permissions
● Analyse approfondie des performances (Lighthouse, Core Web Vitals)
● Déploiement expert sur plateformes cloud (Vercel, Netlify) : configurations optimales, gestion précise des environnements et déploiements automatisés
Introduction approfondie à Nuxt.js et son écosystème
● Présentation complète de l'écosystème Nuxt : bénéfices, cas d’usage concrets● Outils recommandés : Node.js, gestionnaires de paquets (NPM, PNPM), Vite comme bundler performant
● Révision rapide des fondamentaux Vue.js : gestion avancée des événements, composants modulaires, directives complexes
Bases pratiques de Nuxt.js
● Structure détaillée d’un projet Nuxt.js : conventions importantes, organisation optimale des dossiers et fichiers● Comprendre le Virtual DOM, rendu efficace des composants
● Création avancée et réutilisation de composants avec Vue/Nuxt
● Gestion experte de la communication entre composants (props, événements personnalisés, slots complexes)
Options API versus Composition API
● Présentation approfondie des deux approches● Étude comparative et recommandations concrètes selon les besoins du projet.
● Mise en pratique avancée avec reactive, ref, computed, setup, etc.
Gestion avancée des formulaires
● Liaison avancée avec v-model et gestion efficace des données utilisateur● Techniques de validation robustes et gestion optimisée des erreurs côté client
● Bonnes pratiques et patterns recommandés pour une gestion durable des formulaires
Jour 2 : Composants Nuxt avancés et Gestion de données
Gestion avancée du cycle de vie et composants dynamiques
● Exploitation approfondie des hooks de cycle de vie Vue/Nuxt (onMounted, onUpdated, watchEffect, etc.)● Composables et fonctions réutilisables avancées
● Techniques avancées : téléportation, gestion dynamique des composants avec suspense et async components
Composants spécifiques à Nuxt.js
● Utilisation avancée de <NuxtLink> pour optimisation côté client● Structuration experte avec <NuxtLayout>, gestion efficace des routes automatiques avec <NuxtPage>.
● Navigation optimisée avec <NuxtChild>, gestion performante des images avec <NuxtImg> et <NuxtPicture>.
Gestion de l’état avec Pinia et consommation d’API
● Pinia en profondeur : avantages par rapport à Vuex, partage efficace des états, getters/actions avancés● Exploitation poussée des méthodes useFetch et useAsyncData pour intégrer des données externes
● Gestion optimisée des erreurs, états de chargement et interactions utilisateur
Rendu optimisé et SEO avancé
● Routage automatique avancé via l’arborescence de fichiers.● Techniques modernes de génération statique (SSG) et rendu serveur (SSR)
● Optimisation SEO avancée : balises méta dynamiques, réseaux sociaux, sitemap automatique
● Lazy loading intelligent, préchargement prédictif pour performances optimales
Jour 3 : Tests avancés, Performance et Déploiement
Tests automatisés et avancés
● Tests end-to-end poussés avec Cypress : configuration, scénarios complexes (authentification, navigation)● Tests unitaires avancés avec Vitest ou Jest : montage précis des composants, mocks complexes, couverture de code élevée
● Meilleures pratiques en tests : optimisation des suites, gestion avancée des cas d’erreurs
Gestion avancée des données avec TanStack Query
● Approfondissement de TanStack Query pour gestion du cache avancée● Intégration experte avec Nuxt.js (Composition API)
● Stratégies sophistiquées d’invalidation, caching et performance réseau
Patterns et bonnes pratiques avancées
● Architecture de projet scalable : gestion modulaire des dossiers et fichiers● Plugins et modules Nuxt avancés : implémentation et optimisation
● Sécurité approfondie et gestion précise des rôles et permissions
Optimisation des performances et stratégies de déploiement
● Techniques expertes : code splitting intelligent, pré-rendu dynamique● Analyse approfondie des performances (Lighthouse, Core Web Vitals)
● Déploiement expert sur plateformes cloud (Vercel, Netlify) : configurations optimales, gestion précise des environnements et déploiements automatisés
Public cible :
Ce cours s'adresse aux développeurs Vue.js souhaitant découvrir Nuxt.js et ses fonctionnalités.
Prérequis :
Pour suivre cette formation Nuxt.js il est nécessaire d'avoir une solide expérience en développement web (HTML, CSS, JavaScript) ainsi que des bases de Vue.js.
J'évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant le test de prérequis.
Date de mise à jour du programme : 23/02/2026
Dates et lieux
Période souhaitée
Lieux
Type d'affichage