Formation Nuxt New
3 jours de formation pour apprendre à développer efficacement avec Nuxt.js !
Vue d'ensemble
Bonne connaissance des technologies web (HTML, CSS, JavaScript).
Expérience avec Vue.js (Vue 2 ou Vue 3 selon la version de Nuxt utilisée).
Objectifs pédagogiques
Programme détaillé
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.
Avis des participants
Formation claire, structurée et directement applicable. Le formateur a pris le temps de répondre à toutes nos questions avec des exemples concrets.
Très bon équilibre entre théorie et pratique. Les exercices permettent de comprendre rapidement les concepts et de les mettre en œuvre.
Un formateur expérimenté, pédagogue et disponible. Je repars avec des méthodes et des outils que je peux utiliser immédiatement dans mon travail.
Le contenu était dense, mais très bien expliqué. Le rythme a été adapté au niveau du groupe et chacun a pu progresser.
Des formateurs experts, reconnus par nos apprenants
Chez Sparks Formation, la qualité de nos formations repose sur l'expertise de nos formateurs et la satisfaction de nos apprenants.
Note moyenne attribuée par les participants à nos formateurs
formateurs experts partenaires
Sparks Formation
sujets IT délivrés chaque jour partout en France
Financement
Cette formation est éligible aux financements OPCO et FNE-Formation. Nos équipes vous accompagnent dans le montage de votre dossier.
En savoir plus sur le financement
