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.

Objectifs

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

À qui s'adresse cette formation ?

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.

J’évalue mes connaissances pour vérifier que je dispose des prérequis nécessaires pour profiter pleinement de cette formation en faisant ce test.

Contenu du cours Nuxt.js

Jour 1 : Fondamentaux de Nuxt.js et mise en place

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

Date de mise à jour du programme : 24/06/2025

Dates et lieux

Période souhaitée

Lieux

Du 17 au 19 novembre 2025

Lieu

Distanciel

Durée

3 jrs

1990 € HT