Vue.js est un framework JavaScript moderne qui te permet de construire des interfaces web réactives simplement. Cette formation te propose de découvrir et de maîtriser Vue.js à travers la création d’un projet unique : ton mini tableau Kanban pour gérer des tâches.

Formation Vue.js : créez ton mini Kanban

Le parcours inclut l’installation sur Windows, macOS ou Linux, des explications claires par chapitre avec exemples et code, et une progression pédagogique étape par étape vers une application fonctionnelle. Tu apprendras à gérer les tâches, leur statut, et à afficher des statistiques, tout en adoptant les bonnes pratiques Vue.js.

Chapitre 1 : Prépare ton environnement et crée un premier composant

Notions Vue.js présentées : Structure d’un composant (template/script/style), props, directives de base (v-bind: ou :)

• Installe Node.js (version LTS recommandée) sur Windows, macOS ou Linux
• Vérifie l’installation via les commandes node -v et npm -v
• Crée ton projet Vue.js moderne avec npm create vue@latest
• Lance le serveur de développement avec npm run dev
• Comprends la structure d’un composant Vue (template, script, style)
• Crée un composant simple TaskItem qui affiche un titre et une description de tâche

Chapitre 2 : Gère une liste de tâches dynamique

Notions Vue.js présentées : Composition API (ref, reactive), v-for, événements (@click), v-model

• Crée un formulaire d’ajout de tâches (titre et description)
• Gère l’état local des tâches dans un composant parent avec la Composition API
• Affiche la liste des tâches ajoutées dynamiquement
• Ajoute la gestion des événements pour le bouton d’ajout
• Identifie les bonnes pratiques pour structurer tes données et événements

Chapitre 3 : Organise tes tâches en colonnes Kanban

Notions Vue.js présentées : Props pour passer des données, computed properties, méthodes (methods), conditions (v-if/v-else)

• Définit trois statuts : “À faire”, “En cours”, “Terminé”
• Crée des composants TaskColumn pour chaque statut
• Filtre et affiche les tâches selon leur statut dans chaque colonne
• Permets le changement de statut par interaction utilisateur (bouton ou menu)
• Mets en place la réactivité pour que ton interface suive les changements immédiatement

Chapitre 4 : Affiche les statistiques et améliore ton code

Notions Vue.js présentées : Computed properties avancées, watchers (watch), lifecycle hooks (onMounted), bonnes pratiques de refactorisation

• Calcule le nombre total de tâches
• Affiche la répartition des tâches par statut dans un composant StatsHeader
• Refactorise ton code pour plus de clarté et modularité
• Adopte des noms cohérents et optimise la gestion d’état
• Prépare la base pour étendre ton projet avec des fonctionnalités avancées (persistance, routing)

Chapitre 5 (optionnel) : Bonnes pratiques et extensions possibles

Notions Vue.js présentées : Vue Router (navigation), Pinia (gestion d’état globale), directives personnalisées, composition API avancée

• Découvre les concepts avancés : Vue Router, Pinia
• Vois leur impact sur la structuration de ton projet et gestion multi-pages
• Suis les conseils pour intégrer des tests unitaires ou e2e
• Explore des idées pour ajouter le drag & drop, persistance via API

Prêt à transformer ton mini Kanban en projet pro ?

Imagine déjà ton tableau Kanban prendre vie sous tes yeux : tâches qui s’ajoutent en un clic, colonnes qui se mettent à jour en temps réel, statistiques qui motivent ton avancement. Ce parcours Vue.js te donne les bases solides pour aller plus loin – vers une app multi-utilisateurs, avec authentification et déploiement cloud. Le chapitre 1 t’attend dans ton terminal : lance npm create vue@latest dès maintenant et passe au niveau supérieur du développement front-end réactif !