Développement web front-end
Vue.js 3 : applications web réactives
Construire des interfaces réactives avec Vue 3 : composants, routage, Pinia et Composition API.
- Durée
- 21 h · 3 jours
- Niveau
- Intermédiaire
- Format
- Présentiel · Distanciel · Mixte
- Effectif max.
- 12 participants
Présentation
Ce programme apprend à développer des applications monopage avec Vue.js 3. Les participants créent un projet moderne, découpent l’interface en composants, gèrent la navigation avec Vue Router et l’état partagé avec Pinia. Ils découvrent la Composition API, la comparent à l’API Options et se familiarisent avec les tests unitaires de composants.
À qui s’adresse ce programme
- Développeurs web front-end
- Développeurs PHP ou back-end qui passent à une interface moderne
- Équipes qui évaluent Vue.js
Prérequis
- Très bonne maîtrise de HTML5, CSS3 et JavaScript
Objectifs pédagogiques
- Créer un projet Vue 3 avec Vite
- Écrire composants, props, slots et événements personnalisés
- Comprendre la réactivité et le cycle de vie
- Configurer la navigation avec Vue Router
- Gérer l’état partagé avec Pinia
- Utiliser la Composition API et les composables
- Tester des composants avec Vitest
Programme détaillé
6 modules · 21 h · 3 jours
Jour 1
Premiers pas avec Vue 3
50 % théorie · 50 % pratique
- Philosophie de Vue et comparaison avec ses alternatives
- Créer un projet avec Vite
- Template, interpolation et directives
- Réactivité : ref et reactive
- Gérer les événements du DOM
Composants et communication
30 % théorie · 70 % pratique
- Composants monofichiers
- Props et validation
- Événements personnalisés
- Slots
- Cycle de vie et validation de saisie
🛠 Ateliers pratiques
Interface en composants1,5 h
Découper une interface de tableau de bord en composants.
✅ Livrable : Un tableau de bord modulaire
Jour 2
Propriétés calculées, templates et transitions
50 % théorie · 50 % pratique
- Computed, watchers et méthodes
- Rendu conditionnel et listes
- Formulaires et v-model
- Transitions et animations
- Bonnes pratiques de lisibilité
Navigation avec Vue Router
30 % théorie · 70 % pratique
- Routes, liens et paramètres
- Routes imbriquées et gardes de navigation
- Chargement différé des pages
- Transitions entre écrans
- Gestion des erreurs de navigation
🛠 Ateliers pratiques
Application multi-pages1,5 h
Ajouter routes et gardes d’accès au projet.
✅ Livrable : Une application avec pages protégées
Jour 3
État partagé avec Pinia et Composition API
30 % théorie · 70 % pratique
- Stores Pinia : state, getters, actions
- Actions asynchrones et appels d’API
- Composition API et script setup
- Composables réutilisables
- Options API ou Composition API : comment choisir
🛠 Ateliers pratiques
Store et composables2 h
Mettre en place un store et deux composables pour l’application.
✅ Livrable : Un store testé et des composables
Tests et finalisation
50 % théorie · 50 % pratique
- Tests unitaires avec Vitest et Vue Test Utils
- Tester un composant, un store et un routage
- Build de production
- Pistes : TypeScript, rendu côté serveur
- Bilan et plan de montée en compétence
Outils et technologies
JavaScriptNode.jsVisual Studio CodeVue.js
Méthodes pédagogiques
- Alternance d’exposés courts et de travaux pratiques
- Démonstrations en direct par le formateur
- Projet fil rouge construit au fil des modules
- Corrections collectives et échanges sur les bonnes pratiques
Évaluation
- Exercices pratiques corrigés à chaque module
- Mini-projet réalisé en fin de formation
- Quiz de validation des acquis
Matériel requis
- Un ordinateur avec une connexion internet
- Un éditeur de code et Node.js installés
Ressources fournies
- Support de cours et dépôt d’exercices corrigés
Débouchés
- Une application Vue complète avec navigation et état
- Une bonne compréhension de la Composition API
- Un projet prêt à servir de base