- Référence : NUXT
- Durée : 3 jours (21h)
- Lieu : Au choix. À distance ou en présentiel, à Paris ou en Régions
1990€ HT
Choisir une date et Réserver- NEW
Formation Nuxt.JS : Architecture, Performances et Déploiement
Durée
3 jours
Niveau
Intermédiaire
Classe à distance
Possible
Vous pouvez suivre cette formation en direct depuis votre domicile ou votre lieu de travail. Plus d'informations sur notre solution de classe à distance...
Référence
NUXT
Éligible CPF
Non
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.
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
Public :
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.
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
Dates et lieux
Ces formations peuvent aussi vous intéresser :
ReactJS Avancé
- 2 jrsMaîtriser les fonctionnalités avancées de ReactJS
- Niveau : Avancé
- Référence : REJA
Représenter les données sous forme graphique et interactive avec Data-Driven Documents
- Niveau : Fondamental
- Référence : D3JS
Formations Informatique
et Management
en ligne à ce jour
+
Stagiaires dans nos salles
de cours sur
l'année
%
De participants satisfaits
ou très satisfaits de nos
formations
Formateurs experts
validés par
PLB
