Vue.js

Développeurs

• Comprendre les principes fondamentaux de Vue.js et des SPA
• Développer une application web avec Vue.js 3
• Structurer un projet Vue de manière claire et maintenable
• Gérer la navigation, l'état global et les appels HTTP
• Créer des composants réutilisables et testables
• Mettre en œuvre les bonnes pratiques actuelles de l'écosystème Vue

!!!!! Jour 1 — Fondamentaux de Vue.js et composants !!!!!! Introduction à Vue.js * Présentation de Vue.js et de son positionnement * SPA vs MPA * Découverte de l'écosystème Vue 3 * Création d'un projet avec Vite (create-vue) * Structure d'un projet Vue !!!!!! Templates et réactivité * Interpolation de données * Directives principales : ** v-bind (:) ** v-on (@) ** v-if, v-for, key ** v-model (bases) * Réactivité et mise à jour du DOM !!!!!! Composants Vue * Création et utilisation de composants * Passage de données avec les props * Communication parent / enfant avec les événements (emit) * Cycle de vie des composants (notions) * Styles de composants (scoped) !!!!!! API Composition – bases * ref et reactive * Propriétés calculées avec computed * Observation des données avec watch !!!!!! Travaux pratiques * Développement d'une mini-application (liste / détail) sans routage !!!!! Jour 2 — Navigation, données et gestion d'état !!!!!! Routage avec Vue Router * Installation et configuration * Définition des routes * Paramètres de route et passage en props * Navigation programmatique * Routes imbriquées (simples) * Chargement à la demande des routes (lazy loading) !!!!!! Appels HTTP et accès aux données * Appels API avec Axios * Gestion des états de chargement et d'erreur * Centralisation des appels HTTP dans des services !!!!!! Architecture d'une application Vue * Organisation des dossiers : ** views ** components ** services ** composables * Séparation des responsabilités * Bonnes pratiques et anti-patterns courants !!!!!! Gestion d'état globale avec Pinia * Pourquoi utiliser un store * Présentation de Pinia (store officiel Vue) * Création d'un store avec defineStore * State et actions * Utilisation du store dans les composants !!!!!! Travaux pratiques * Mise en place d'une SPA avec : ** Vue Router ** Appels API ** Store Pinia !!!!! Jour 3 — Bonnes pratiques, formulaires et tests !!!!! * Principe et avantages * Utilisation de defineProps et defineEmits * Macro defineModel * Organisation du code avec l'API Composition !!!!!! Formulaires * v-model avancé * Création de composants de formulaire * Validation de formulaires avec VeeValidate (bases) !!!!!! Tests d'une application Vue * Pourquoi tester une application front-end * Tests unitaires avec Vitest et @vue/test-utils * Test d'un store Pinia * Tests end-to-end avec Cypress (cas simple) !!!!!! Qualité et bonnes pratiques * Rôle d'ESLint et Prettier * Bonnes pratiques de développement Vue 3 * Conseils pour aller plus loin après la formation

Une attestation de participation sera transmise aux participants