Formation Nuxtjs Avancé

Programme de notre formation Nuxt

Introduction à NuxtJs Avancé 

• Rappels sur les concepts  :
  • architecture Nuxt
  • fonctionnement SSR vs SSG
• Nouveauté et évolutions de NuxtJS 
• Stratégies d’optimisation du rendu côté serveur
• Choisir entre SSR, SSG, ISR, ou SPA selon les besoins

Architecture et configuration poussées

• Personnalisation fine du nuxt.config
• Modularisation avancée du projet
• Structurer un projet de grande envergure
• Organisation des layouts complexes
• Middlewares globaux vs spécifiques
• Optimisation du runtimeConfig

Routing avancé

• Routes complexes avec paramètres multiples
• Routes conditionnelles, protégées, ou personnalisées
• Utilisation de middlewares de manière stratégique
• Internationalisation avec Nuxt
• Lazy-loading des routes

Vue et composants en profondeur

• Composition API vs Options API dans un projet NuxtJS
• Réutilisation de logique avec composables
• Injection de dépendances avec provide/inject
• Slots avancés, v-slot, et composants dynamiques
• Gestion de la performance des composants lourds

Data Fetching avancé

• Gérer l’état de chargement, erreurs et fallback
• useFetch, asyncData, useAsyncData, useLazyFetch
• Hydratation côté client vs pré-rendu côté serveur
• Caching stratégique
  • HTTP
  • mémoire
  • payload
• Intégration avec des APIs RESTful ou GraphQL
• Utiliser Nitro pour créer des endpoints backend custom

Authentification & sécurité

• Mise en place d’un système d’authentification avec JWT/OAuth
• Intégration avancée de nuxt-auth et auth-module
• Stratégies SSR/SPA pour l’authentification
• Protection des routes, pages et API endpoints
• Stockage sécurisé des tokens

State management Avancé

• Vuex avancé :
  • modules dynamiques
  • plugins
  • middleware
• Migrer vers pinia pour Nuxt 3
• Gestion des formulaires complexes et validation côté client/serveur
• Persistance de l’état
• Synchronisation état frontend / backend

Testing , qualité de code et CI/CD

• Tests unitaires avec Jest ou Vitest
• Tests E2E avec Cypress ou Playwright
• Mock de requêtes backend avec MSW
• Mis en place ESLint, Prettier, Stylelint en workflow automatisé
• CI/CD avec GitHub Actions ou GitLab CI
• Surveillance des performances et des erreurs

Déploiement & performances

• Déploiement sur Vercel, Netlify, Render, ou  sur un serveur custom
• Analyse des performances avec Lighthouse et Web Vitals
• Optimisation de la taille du bundle
• Utiliser le middleware serverMiddleware pour créer une API custom
• Cache serveur/API/CDN
• Monitoring et observabilité