📚 Exercices Pratiques pour le Plan d’Apprentissage Vue.js 3

PHASE 1 : FONDAMENTAUX

Module 1 : Introduction à Vue.js

1. Recherchez et listez 5 entreprises célèbres utilisant Vue.js dans leur stack technique avec une brève explication de leur utilisation.
2. Créez une matrice comparative détaillant les avantages et inconvénients de Vue.js par rapport à React et Angular (au moins 5 critères).
3. Explorez la documentation officielle de Vue.js et rédigez un résumé des 5 principales différences entre Vue 2 et Vue 3.
4. Identifiez 3 types d’applications web où Vue.js serait particulièrement adapté et expliquez pourquoi.
5. Recherchez et présentez 3 frameworks/utilitaires complémentaires à Vue.js (par exemple pour le routage, la gestion d’état, etc.).
6. Créez un tableau comparatif des temps de chargement d’une application simple en Vue 3 vs Vue 2 avec des mesures concrètes.
7. Identifiez 5 nouvelles fonctionnalités de Vue 3 qui améliorent significativement l’expérience de développement et expliquez leur impact.

Module 2 : Environnement de développement

1. Créez un projet Vue.js simple en utilisant uniquement le CDN et comparez la structure avec un projet créé avec Vite.
2. Initialisez un projet avec Vite en activant toutes les options (TypeScript, Vue Router, Pinia, etc.) et explorez la structure du projet.
3. Analysez et expliquez le rôle de chaque fichier de configuration important (package.json, vite.config.js, tsconfig.json).
4. Configurez un projet Vue.js avec TypeScript et documentez les changements dans la structure et le workflow de développement.
5. Comparez les temps de build et de démarrage entre un projet configuré avec Vite vs un projet configuré avec Webpack.
6. Configurez ESLint et Prettier dans un projet Vue.js et créez un guide d’utilisation pour votre équipe.
7. Créez une liste des 5 extensions VS Code les plus utiles pour le développement Vue.js avec une explication de leur utilité.

Module 3 : Première application

1. Créez une application Vue.js simple avec un compteur utilisant ref et ajoutez des boutons pour incrémenter, décrémenter et réinitialiser.
2. Recréez la même application en utilisant reactive au lieu de ref et comparez les deux approches.
3. Ajoutez un affichage indiquant combien de fois le compteur a été modifié (incrémenté ou décrémenté).
4. Implémentez un système de sauvegarde temporaire du compteur dans le localStorage.
5. Ajoutez un bouton “Undo” qui permet de revenir à la valeur précédente du compteur.
6. Créez une version “thématique” de l’application où la couleur change selon la valeur du compteur.
7. Ajoutez un système de notification qui s’affiche lorsque le compteur atteint un seuil spécifique.

Module 4 : Structure projet

1. Configurez un projet Vue.js avec les extensions VS Code recommandées et documentez votre configuration.
2. Créez un système de snippets personnalisés pour les composants Vue.js (SFC) avec les structures de base.
3. Configurez votre projet pour utiliser les composants auto-importés et testez son fonctionnement.
4. Créez un template personnalisé pour les nouveaux composants Vue.js avec des commentaires et une structure de base.
5. Mettez en place un système de documentation intégré au projet avec des commentaires JSDoc/TypeDoc.
6. Configurez votre projet pour utiliser un pré-processeur CSS (SCSS/Sass) et créez un exemple d’utilisation.
7. Créez un système de gestion des variables d’environnement pour votre projet Vue.js.

Module 5 : Templates Vue

1. Créez une application affichant un message de bienvenue personnalisé avec interpolation et des données utilisateur.
2. Créez un bouton dont la couleur, taille et bordure changent selon des variables réactives avec v-bind.
3. Créez un formulaire simple avec v-model pour capturer le nom, prénom et âge de l’utilisateur.
4. Ajoutez des événements click, mouseover et mouseout à un élément et affichez les informations dans la console.
5. Créez un lien dont l’URL et les attributs (title, target) sont générés dynamiquement avec v-bind.
6. Utilisez v-once pour afficher un élément qui ne doit pas être mis à jour même si les données changent.
7. Utilisez v-html pour afficher du contenu HTML dynamique provenant d’une API (simulée).

Module 6 : Réactivité fondamentale

1. Créez un compteur utilisant ref et ajoutez un affichage indiquant si le compteur est pair ou impair.
2. Créez un objet utilisateur avec reactive et affichez ses propriétés avec un formulaire de mise à jour.
3. Créez un tableau réactif de tâches avec ref et implémentez des fonctions pour ajouter, supprimer et marquer comme terminé.
4. Utilisez isRef et unref pour vérifier et manipuler des références dans différentes situations.
5. Créez un formulaire avec plusieurs champs réactifs et affichez un résumé des données saisies.
6. Comparez l’utilisation de ref vs reactive pour un même scénario complexe (par exemple un formulaire imbriqué).
7. Créez un système de gestion de panier avec reactive qui calcule automatiquement le total et les taxes.

Module 7 : Directives essentielles

1. Créez une application avec un toggle qui affiche/masque plusieurs éléments avec v-if et v-else.
2. Créez une liste de tâches avec v-for et ajoutez la possibilité de filtrer par statut (à faire, en cours, terminé).
3. Utilisez v-show pour créer un système d’onglets où chaque onglet affiche un contenu différent.
4. Créez un formulaire de recherche avec v-model et les modificateurs .trim, .number et .lazy.
5. Utilisez v-for avec un objet et créez un tableau affichant les clés et les valeurs de l’objet.
6. Utilisez les modificateurs d’événements .prevent, .stop, .self et .once dans différents scénarios.
7. Créez une liste avec v-for et implémentez un système de tri dynamique avec des identifiants uniques.

Module 8 : Formulaires simples

1. Créez un formulaire de contact complet avec validation des champs obligatoires et format d’email.
2. Ajoutez une validation en temps réel pour un champ mot de passe avec des critères de sécurité.
3. Créez un formulaire de login avec vérification du mot de passe et gestion des erreurs.
4. Utilisez v-model avec un textarea pour un champ commentaire et ajoutez un compteur de caractères.
5. Créez un formulaire de recherche avec v-model et implémentez un système de suggestions automatiques.
6. Ajoutez des messages d’erreur personnalisés qui s’affichent quand un champ est invalide ou vide.
7. Créez un formulaire d’inscription avec validation de la confirmation du mot de passe et conditions d’utilisation.

PHASE 2 : COMPOSANTS ET INTERACTIVITÉ

Module 9 : Single-File Components

1. Créez un composant SFC pour afficher un bouton personnalisé avec différentes variantes (primary, secondary, danger).
2. Créez un composant SFC pour afficher une carte de produit avec image, titre, description et prix.
3. Créez un composant SFC pour afficher un en-tête de page avec navigation responsive.
4. Créez un composant SFC pour afficher un pied de page avec informations légales et réseaux sociaux.
5. Créez un composant SFC pour afficher une liste de tâches avec possibilité d’ajout et de suppression.
6. Créez un composant SFC pour afficher un formulaire de recherche avec suggestions et historique.
7. Créez un composant SFC pour afficher un système d’alerte personnalisé avec différents types (success, warning, error).

Module 10 : Props et Communication

1. Créez un composant qui reçoit un message et un niveau de gravité en props et l’affiche avec le style approprié.
2. Créez un composant avec des props typées strictement avec TypeScript et validez leur type avec des règles personnalisées.
3. Créez un composant avec des valeurs par défaut pour les props et testez leur comportement quand elles ne sont pas fournies.
4. Créez un composant qui transforme une prop avant de l’utiliser (par exemple, formater une date ou un nombre).
5. Créez un composant avec des props optionnelles et obligatoires et documentez leur utilisation.
6. Créez un composant qui valide une prop avec une fonction personnalisée et affiche un message d’erreur approprié.
7. Créez un composant qui utilise des props avec des valeurs complexes (objets, tableaux) et implémentez une validation profonde.

Module 11 : Événements personnalisés

1. Créez un composant enfant qui émet un événement quand un bouton est cliqué et un composant parent qui gère cet événement.
2. Créez un composant enfant qui émet un événement avec des données complexes (objet ou tableau) et un composant parent qui les utilise.
3. Créez un composant enfant qui valide les événements émis avec des règles personnalisées et affiche des messages d’erreur.
4. Créez un composant enfant qui émet des événements personnalisés avec defineEmits et utilisez-les dans un composant parent.
5. Créez un composant parent qui écoute et gère plusieurs événements différents de l’enfant avec des gestionnaires appropriés.
6. Créez un composant enfant qui émet des événements à différents moments du cycle de vie et un composant parent qui les affiche.
7. Créez un système de communication entre composants non hiérarchiques en utilisant un event bus personnalisé.

Module 12 : Slots basiques

1. Créez un composant avec un slot basique pour afficher du contenu personnalisé et testez-le avec différents types de contenu.
2. Créez un composant avec des slots nommés pour différentes parties (header, body, footer) et utilisez-le dans une page.
3. Créez un composant avec un scoped slot pour passer des données au contenu et utilisez-le pour personnaliser l’affichage.
4. Créez un composant avec un slot dynamique qui change selon une condition et testez différents scénarios.
5. Créez un composant de layout avec des slots pour le header, le contenu principal et le footer, et utilisez-le dans votre application.
6. Créez un composant de liste qui utilise un scoped slot pour personnaliser chaque élément et testez-le avec différents templates.
7. Créez un composant d’onglets avec des slots pour chaque onglet et implémentez un système de navigation entre onglets.

Module 13 : Propriétés calculées

1. Créez une propriété computed qui formate une date selon le format local de l’utilisateur.
2. Créez une propriété computed qui filtre une liste de données selon un critère de recherche.
3. Comparez les performances d’une méthode vs une propriété computed dans un scénario avec une grande liste de données.
4. Créez une propriété computed avec des setters et des getters pour gérer une valeur complexe.
5. Créez une propriété computed qui dépend de plusieurs variables réactives et observez son comportement.
6. Créez une propriété computed qui calcule un total, une moyenne et un pourcentage à partir d’une liste d’éléments.
7. Créez une propriété computed qui valide le statut d’un formulaire complexe avec plusieurs champs.

Module 14 : Watchers

1. Créez un watcher qui affiche un message dans la console quand une variable change et inclut l’ancienne et la nouvelle valeur.
2. Créez un watcher qui valide un champ de formulaire complexe avec des règles personnalisées.
3. Créez un watcher qui déclenche une requête API quand une recherche change après un délai de 300ms.
4. Utilisez un watcher profond pour observer les changements dans un objet complexe et affichez les modifications.
5. Utilisez un watcher immédiat pour exécuter du code dès l’initialisation et afficher un message de bienvenue.
6. Comparez l’utilisation d’un watcher vs une propriété computed pour un même scénario de filtrage de données.
7. Créez un système de sauvegarde automatique avec un watcher qui sauvegarde les données dans le localStorage.

Module 15 : Cycle de vie

1. Créez un composant qui affiche un message dans la console à chaque étape du cycle de vie avec des informations détaillées.
2. Utilisez onMounted pour charger des données depuis une API simulée et affichez-les dans le composant.
3. Utilisez onBeforeUnmount pour nettoyer des ressources (comme des timers ou des écouteurs d’événements).
4. Créez un composant qui met en place un timer dans onMounted et le nettoie dans onBeforeUnmount.
5. Utilisez onUpdated pour réagir aux mises à jour du composant et afficher un message quand certaines propriétés changent.
6. Créez un composant qui utilise onBeforeUpdate pour comparer l’état avant et après mise à jour et affiche les différences.
7. Utilisez les hooks de cycle de vie pour implémenter un système de cache local avec expiration.

Module 16 : Directives personnalisées

1. Créez une directive personnalisée pour mettre le focus sur un élément quand il est monté.
2. Créez une directive personnalisée pour formater un nombre en devise selon la locale de l’utilisateur.
3. Créez une directive personnalisée pour détecter les clics en dehors d’un élément (utile pour les modales).
4. Créez une directive personnalisée pour appliquer une animation de défilement fluide vers un élément.
5. Créez une directive personnalisée pour limiter la saisie à des chiffres dans un champ input.
6. Créez une directive personnalisée pour afficher un tooltip personnalisé avec des options configurables.
7. Créez une directive personnalisée pour masquer un élément après un délai configurable.

PHASE 3 : APPLICATIONS RÉELLES

Module 17 : Vue Router

1. Configurez Vue Router dans un projet Vue.js et créez au moins 3 routes simples pour différentes pages.
2. Créez un système de navigation avec <RouterLink> entre plusieurs pages et stylisez les liens actifs.
3. Configurez une route par défaut pour les pages non trouvées (404) avec un composant personnalisé.
4. Créez un layout commun pour plusieurs routes avec un en-tête et un pied de page partagés.
5. Utilisez router.push pour rediriger après une action réussie (par exemple après soumission d’un formulaire).
6. Configurez des routes imbriquées pour un système de navigation complexe (par exemple un tableau de bord).
7. Utilisez les métadonnées de route pour configurer dynamiquement le titre de la page et les méta-tags.

Module 18 : Navigation SPA

1. Créez un système de navigation avec <RouterLink> entre plusieurs pages et ajoutez des transitions entre les pages.
2. Utilisez router.push pour rediriger après une action et router.replace pour remplacer l’historique.
3. Créez un guard de navigation simple pour protéger une route réservée aux utilisateurs authentifiés.
4. Utilisez les guards de navigation pour vérifier les permissions avant d’accéder à certaines fonctionnalités.
5. Créez un système de navigation avec des paramètres dynamiques et utilisez-les pour afficher des données spécifiques.
6. Implémentez un système de sauvegarde de l’état avant navigation et restauration après retour.
7. Créez un système de navigation avec des transitions personnalisées et des animations fluides.

Module 19 : Routes dynamiques

1. Créez une route dynamique pour afficher le détail d’un article de blog avec un identifiant unique.
2. Utilisez $route.params pour accéder aux paramètres de route et charger les données correspondantes.
3. Créez des routes imbriquées pour un système de navigation complexe (par exemple un tableau de bord avec sous-sections).
4. Utilisez des routes nommées pour la navigation et comparez avec l’utilisation d’URL absolues.
5. Créez un système de pagination avec des routes dynamiques pour les numéros de page.
6. Créez des routes avec plusieurs paramètres dynamiques et utilisez-les pour filtrer des données.
7. Utilisez router.resolve pour obtenir l’URL complète d’une route et créez un système de partage de liens.

Module 20 : Lazy loading

1. Configurez le lazy loading pour les routes d’une application et analysez l’impact sur les performances.
2. Utilisez des groupes de chunks pour optimiser le lazy loading et réduire le nombre de fichiers générés.
3. Ajoutez des transitions de chargement personnalisées pendant le lazy loading des composants.
4. Utilisez le préchargement des routes pour améliorer l’expérience utilisateur lors de la navigation.
5. Configurez le lazy loading pour les composants non liés au routage et analysez son impact.
6. Créez un système de chargement personnalisé avec indicateur de progression pendant le lazy loading.
7. Analysez l’impact du lazy loading sur les performances de l’application avec des outils comme Lighthouse.

Module 21 : Introduction à Pinia

1. Installez et configurez Pinia dans un projet Vue.js et créez un store simple avec un state de base.
2. Comparez Pinia avec Vuex et rédigez un rapport sur les différences majeures et les avantages de Pinia.
3. Créez un store avec un state, des getters et des actions simples et utilisez-les dans un composant.
4. Utilisez TypeScript avec Pinia pour typer les stores et expliquez les avantages de cette approche.
5. Configurez Pinia avec des plugins pour ajouter des fonctionnalités comme le logging ou la persistance.
6. Créez un store persistant avec localStorage et testez sa résilience après un rechargement de la page.
7. Explorez les extensions de développement pour Pinia et documentez leur utilisation.

Module 22 : State, Getters, Actions

1. Créez un store pour gérer un compteur avec des méthodes d’incrémentation, décrémentation et réinitialisation.
2. Ajoutez des getters pour calculer des valeurs dérivées (par exemple, si le compteur est pair ou supérieur à un seuil).
3. Créez des actions asynchrones pour simuler des appels API et gérer les états de chargement et d’erreur.
4. Utilisez des actions pour modifier le state de manière contrôlée et ajoutez des validations.
5. Créez un store avec un state complexe (objets imbriqués, tableaux) et implémentez des méthodes pour le manipuler.
6. Utilisez des getters avec paramètres pour filtrer ou transformer des données selon des critères dynamiques.
7. Créez des actions qui appellent d’autres actions et implémentez un système de gestion d’erreurs global.

Module 23 : Intégration composants

1. Accédez à un store depuis un composant avec useStore et affichez des données du state dans le template.
2. Utilisez mapState, mapGetters, mapActions pour mapper les éléments du store et simplifier l’accès.
3. Créez un composant qui modifie le state du store via des actions et observez les mises à jour dans d’autres composants.
4. Créez un composant qui affiche des données du store et implémentez un système de mise à jour en temps réel.
5. Utilisez plusieurs stores dans un même composant et gérez les interactions entre eux.
6. Créez un système de communication entre composants non hiérarchiques via un store partagé.
7. Utilisez des getters dans les templates pour afficher des données calculées et optimisez les performances.

Module 24 : Persistance données

1. Créez un plugin Pinia pour persister automatiquement le state dans localStorage et testez sa résilience.
2. Implémentez un système de panier d’achat avec persistance et gestion des produits ajoutés/supprimés.
3. Créez un système de préférences utilisateur avec persistance (thème, langue, préférences d’affichage).
4. Implémentez un système de sauvegarde automatique pour un formulaire complexe avec persistance.
5. Créez un système de favoris avec persistance et gestion des doublons.
6. Créez un système de thème personnalisé avec persistance et options de personnalisation avancées.
7. Utilisez IndexedDB au lieu de localStorage pour une persistance plus robuste et testez avec de grandes quantités de données.

PHASE 4 : QUALITÉ ET DÉPLOIEMENT

Module 25 : Formulaires avancés

1. Créez un formulaire avec des champs complexes (date, heure, sélection multiple) et implémentez une validation complète.
2. Implémentez une validation personnalisée pour un champ avec des règles complexes et messages d’erreur spécifiques.
3. Créez un formulaire avec des champs dynamiques (ajout/suppression de champs) et gestion de la validation.
4. Utilisez VeeValidate pour la validation des formulaires et comparez avec une approche manuelle.
5. Créez un formulaire avec des règles de validation basées sur d’autres champs (par exemple, confirmation de mot de passe).
6. Implémentez un système de validation en temps réel avec feedback immédiat pour l’utilisateur.
7. Créez un formulaire avec des champs conditionnels qui apparaissent/disparaissent selon les réponses précédentes.

Module 26 : Tests unitaires

1. Configurez Vitest dans un projet Vue.js et écrivez un test de base pour vérifier que le projet fonctionne.
2. Écrivez des tests unitaires pour une fonction simple de calcul ou de formatage avec différents cas de test.
3. Testez une propriété computed dans un store Pinia avec différents états initiaux.
4. Testez une méthode d’un composant avec différentes entrées et vérifiez les sorties attendues.
5. Testez un watcher dans un composant et vérifiez qu’il réagit correctement aux changements.
6. Testez un composant avec des props en simulant différentes configurations et vérifiez le rendu.
7. Testez un composant avec des événements personnalisés en déclenchant des événements et vérifiant les réponses.

Module 27 : Tests E2E

1. Configurez Cypress dans un projet Vue.js et écrivez un test de base pour vérifier que l’application démarre.
2. Écrivez des tests E2E pour la navigation entre pages et vérifiez que les chemins sont corrects.
3. Testez un formulaire complet avec Cypress, depuis la saisie jusqu’à la soumission réussie.
4. Testez un composant interactif avec Cypress en simulant des interactions utilisateur complexes.
5. Écrivez des tests E2E pour les cas d’erreur (champs invalides, erreurs API) et vérifiez les messages.
6. Configurez une pipeline CI/CD pour exécuter les tests automatiquement à chaque push sur GitHub.
7. Écrivez des tests E2E pour les fonctionnalités authentifiées en simulant le processus de connexion.

Module 28 : Accessibilité

1. Ajoutez des transitions simples à un composant avec <Transition> et configurez des délais personnalisés.
2. Créez des animations personnalisées avec des classes CSS et utilisez-les avec le composant <Transition>.
3. Utilisez <TransitionGroup> pour animer des listes lors de l’ajout/suppression d’éléments.
4. Ajoutez des propriétés ARIA appropriées à vos composants pour améliorer l’accessibilité avec les lecteurs d’écran.
5. Créez des formulaires accessibles avec des labels appropriés, des relations aria et une navigation au clavier.
6. Testez l’accessibilité de votre application avec des outils comme Lighthouse et documentez les améliorations.
7. Créez des animations qui respectent la préférence utilisateur pour les mouvements réduits (prefers-reduced-motion).

Module 29 : Build production

1. Générez un build de production avec Vite et analysez les fichiers générés dans le dossier dist.
2. Analysez le bundle avec Vite Bundle Analyzer et identifiez les dépendances les plus volumineuses.
3. Configurez des alias pour simplifier les imports et réduire les chemins relatifs dans le code.
4. Optimisez les imports pour réduire la taille du bundle en utilisant l’importation sélective des bibliothèques.
5. Configurez le code splitting pour améliorer les performances de chargement initial de l’application.
6. Configurez la compression Gzip et Brotli pour les assets et mesurez l’impact sur la taille des fichiers.
7. Configurez des préchargements stratégiques pour améliorer le temps de chargement des routes fréquemment visitées.

Module 30 : Analyse performances

1. Utilisez Vue DevTools pour analyser les performances d’un composant et identifier les re-rendus inutiles.
2. Configurez le lazy loading pour des images et mesurez l’impact sur les métriques de performance.
3. Implémentez la virtualisation des listes pour améliorer les performances avec de grandes quantités de données.
4. Configurez Sentry pour le monitoring des erreurs et testez sa capacité à capturer et rapporter les exceptions.
5. Analysez les temps de chargement avec Lighthouse et identifiez les domaines d’amélioration prioritaires.
6. Identifiez et résolvez les problèmes de re-rendu inutiles en utilisant les outils de débogage de Vue.
7. Configurez des métriques personnalisées pour le monitoring des performances critiques de votre application.

Module 31 : Déploiement

1. Déployez une application Vue.js sur Vercel et configurez un domaine personnalisé.
2. Déployez une application Vue.js sur Netlify et configurez des redirectes personnalisées.
3. Configurez une pipeline CI/CD avec GitHub Actions pour tester et déployer automatiquement sur push.
4. Configurez des environnements de staging et de production avec des variables d’environnement différentes.
5. Configurez des variables d’environnement sécurisées pour les clés API et autres informations sensibles.
6. Configurez Storybook pour documenter les composants et générez une documentation interactive.
7. Mettez en place un système de déploiement canari pour tester les nouvelles fonctionnalités sur un petit groupe d’utilisateurs.

Module 32 : Monitoring

1. Mettez à jour un projet Vue.js existant vers la dernière version et résolvez les problèmes de compatibilité.
2. Utilisez defineModel pour simplifier la gestion des modèles dans un formulaire complexe.
3. Utilisez useId pour générer des identifiants uniques et résoudre les problèmes d’accessibilité.
4. Utilisez useTemplateRef pour accéder plus facilement aux références de template dans la Composition API.
5. Implémentez l’hydratation paresseuse pour améliorer les performances du rendu côté serveur.
6. Utilisez onWatcherCleanup pour nettoyer correctement les ressources dans les watchers asynchrones.
7. Utilisez le shorthand v-bind pour simplifier la syntaxe et rendre le code plus lisible dans les templates.