Formation Nuxt

Introduction à Nuxt.js et son écosystème

Vue d’ensemble de l’écosystème Nuxt et ses avantages.
Outils de développement : Node.js, NPM, Vite.
Rappels des bases de Vue.js : directives, événements, composants.

Les bases de Nuxt.js

Structure d’un projet Nuxt.js (arborescence et conventions).
Fonctionnement du Virtual DOM et rendu des composants.
Création et réutilisation de composants Vue/Nuxt.
Communication entre composants : props, events, slots.

Options API vs Composition API

Découverte de l’Options API.
Introduction à la Composition API (setup, reactive, ref, computed).
Comparaison et cas d’usage selon le type de projet.

Gestion des formulaires et validation

Utilisation de v-model et binding des données.
Validation et gestion des erreurs.
Bonnes pratiques pour des formulaires robustes.

Composants avancés et gestion du cycle de vie

Hooks du cycle de vie (onMounted, onUpdated, etc.).
Composables (fonctions réutilisables avec la Composition API).
Téléportation, suspense et gestion des composants dynamiques.

Composants spécifiques à Nuxt.js

ClientOnly : rendre un composant uniquement côté client.
NuxtLayout et structuration globale d’un projet.
NuxtPage et gestion automatique des routes.
NuxtLink pour la navigation interne.
NuxtImg et NuxtPicture pour l’optimisation des images.

Gestion des données avec Pinia et API externe

Introduction à Pinia et différence avec Vuex.
Partage de données entre composants avec state, getters, actions.
Utilisation d’une API externe ou interne avec useFetch et useAsyncData.
Gestion des erreurs et des états de chargement.

La « magie » de Nuxt.js

Routage automatique basé sur l’arborescence des fichiers.
SSG (Static Site Generation) : génération de sites statiques.
SSR (Server Side Rendering) : rendu côté serveur.
Optimisations SEO : balises meta, gestion des réseaux sociaux.
Lazy loading, préchargement et optimisation des performances.

Tests et automatisation

Introduction aux tests end-to-end avec Cypress.
Configuration de base dans un projet Nuxt.js.
Écriture de tests (login, navigation, formulaires, etc.).
Tests unitaires avec Vitest ou Jest (selon préférence).
Montage des composants, assertions et mocks.
Couverture de code et bonnes pratiques.

Optimisation des données avec TanStack Query

Présentation de TanStack Query (gestion avancée du cache).
Intégration avec Nuxt.js et la Composition API.
Stratégies d’optimisation et invalidation intelligente des requêtes.

Bonnes pratiques et patterns avancés

Organisation des dossiers et fichiers pour un projet scalable.
Utilisation de plugins et modules Nuxt.js.
Sécurisation et gestion des permissions utilisateur.

Performance et déploiement

Techniques avancées d’optimisation (code splitting, pré-rendu).
Mesure des performances avec Lighthouse et Web Vitals.
Déploiement sur Vercel, Netlify ou plateformes PaaS.
Configuration pour la production et gestion des variables d’environnement.