Retour aux projets

Application Todo en Vue.js

16/10/26 → 19/10/26

TP Vue.js : application de gestion de tâches avec plusieurs pages, un store Pinia, des composants réutilisables, une page de connexion qui protège l'accès aux tâches, des animations et des tâches importées depuis une API de données ouvertes.

Vue.js Pinia Vue Router JavaScript Vite API REST

Contexte

TP noté réalisé en octobre 2026 dans le cadre du cours de framework JavaScript. L'objectif était de construire une petite application complète avec Vue.js pour mettre en pratique les notions du cours : composants, routage, gestion d'état centralisée et appels d'API. J'ai aussi créé un thème graphique personnalisé sur le thème d'un ciel de nuit, avec une lune et une palette pastel arc-en-ciel.

Objectifs

  • Créer un projet Vue.js avec Vite, Vue Router et Pinia
  • Organiser l'application en pages et en composants réutilisables
  • Centraliser les données et les actions dans un store
  • Protéger certaines pages derrière une connexion
  • Récupérer des données depuis une API externe

Réalisation

  • Pages et routage : accueil, liste des tâches, détail d'une tâche avec paramètre dans l'URL, connexion et « À propos », chaque page étant chargée seulement quand on la visite
  • Store Pinia : liste des tâches, compteur des tâches restantes calculé automatiquement, et actions pour ajouter, cocher ou supprimer une tâche
  • Composants : TodoItem, qui reçoit sa tâche par une prop et prévient le parent par des événements, et TodoForm, qui utilise v-model pour la saisie
  • Connexion : garde de navigation qui redirige vers la page de connexion si l'utilisateur n'est pas connecté (jeton simulé dans le localStorage), avec un bouton de connexion / déconnexion
  • Animations : transitions entre les pages et animation de la liste quand on ajoute ou supprime une tâche
  • API : composable useFetch réutilisable qui gère le chargement et les erreurs, adresse de l'API stockée dans une variable d'environnement, et premières données de l'API ajoutées comme tâches dans le store
  • Versionnement : suivi du projet avec Git

Compétences mobilisées

  • Gérer le patrimoine informatique : structure d'un projet Vite, dépendances et variables d'environnement
  • Répondre aux incidents et aux demandes : débogage de la réactivité et du routage avec les Vue DevTools
  • Développer la présence en ligne : création d'une interface web dynamique et d'un thème graphique
  • Travailler en mode projet : avancement par étapes selon le sujet du TP, sur plusieurs séances
  • Organiser son développement professionnel : prise en main d'un framework JavaScript moderne

Captures d'écran

À compléter : ajouter ici les captures du projet (dossier src/screen projets).

Bilan

Ce TP m'a fait comprendre l'intérêt d'un framework : les données vivent à un seul endroit, le store, et circulent dans un seul sens. Les composants reçoivent des données par leurs props et signalent les changements par des événements, et l'affichage se met à jour tout seul. J'ai pris le temps de bien comprendre chaque notion plutôt que d'aller vite, ce qui m'a aussi servi pour le QCM du cours.

Pour aller plus loin, il faudrait sauvegarder les tâches pour qu'elles ne disparaissent pas au rechargement, et remplacer le jeton simulé par une vraie authentification côté serveur.