Nous poursuivons avec le Chapitre 3 de la formation Vue.js, incluant les notions théoriques, les exemples de code, et le résultat final de l’atelier fil rouge : la gestion d’un tableau de tâches avec ref() et l’affichage du nombre de tâches terminées via un computed().

Chapitre 3 : Réactivité et gestion d’état

L’objectif est d’apprendre à gérer des données dynamiques avec ref() et reactive(), à utiliser computed() pour dériver des valeurs, et à afficher une liste de tâches avec v-for.

Notions à apprendre

1. ref() vs reactive()

• ref() : pour les valeurs primitives (string, number, boolean) ou objets simples. Accès via .value
• reactive() : pour les objets complexes. Pas besoin de .value (mais attention aux problèmes de réactivité lors de la réaffectation)

Recommandé : Utiliser ref() pour les tableaux et objets simples, surtout en <script setup>.

2. computed()

• Crée une valeur dérivée, recalculée uniquement si ses dépendances changent
• Très utile pour les filtres, totaux, statistiques

3. v-for pour boucler sur une liste

• Syntaxe : v-for="item in list" :key="item.id"
• Toujours utiliser :key pour une performance optimale et éviter les bugs de rendu

4. Mutation vs réactivité

• Vue détecte les mutations sur les tableaux/objets via push(), splice(), item.property = value
• Éviter : array = newArray → cela casse la réactivité. Utiliser array.splice(0, array.length, ...newArray) ou ref().value = newArray

Exemple de code : Gestion d’un tableau de tâches

<!-- src/App.vue (version simplifiée pour l’exemple) -->
<template>
  <div class="app">
    <h1>Mes tâches</h1>
    
    <div class="stats">
      <p>Total : {{ tasks.length }}</p>
      <p>Terminées : {{ doneTasks.length }}</p>
    </div>

    <ul class="task-list">
      <li v-for="task in tasks" :key="task.id" class="task-item">
        {{ task.title }} — <span :class="task.status">{{ task.status }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

// Tableau de tâches réactif
const tasks = ref([
  { id: 1, title: 'Apprendre Vue.js', status: 'done' },
  { id: 2, title: 'Créer un composant', status: 'todo' },
  { id: 3, title: 'Gérer l’état', status: 'inprogress' }
])

// Computed : liste des tâches terminées
const doneTasks = computed(() => {
  return tasks.value.filter(task => task.status === 'done')
})
</script>

<style scoped>
.app {
  padding: 2rem;
  max-width: 600px;
  margin: 0 auto;
}

.stats {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.task-list {
  list-style: none;
  padding: 0;
}

.task-item {
  background: #fff;
  border: 1px solid #ddd;
  padding: 0.75rem;
  margin: 0.5rem 0;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.task-item .done {
  color: #2ecc71;
  font-weight: bold;
}

.task-item .todo {
  color: #e74c3c;
}

.task-item .inprogress {
  color: #f39c12;
}
</style>

Atelier fil rouge : Afficher le nombre de tâches terminées

Objectif :

• Déclarer un tableau de tâches dans App.vue avec ref()
• Créer un computed() qui filtre les tâches avec status === 'done'
• Afficher le nombre total de tâches et le nombre de tâches terminées
• Afficher la liste des tâches avec leur statut

Résultat final : App.vue mis à jour

<!-- src/App.vue -->
<template>
  <div class="app">
    <header>
      <h1>Mon gestionnaire de tâches</h1>
      <p>Chapitre 3 : Réactivité et gestion d’état</p>
    </header>

    <main>
      <div class="stats">
        <p><strong>Total :</strong> {{ tasks.length }}</p>
        <p><strong>Terminées :</strong> {{ doneTasks.length }}</p>
      </div>

      <div class="task-list">
        <TaskCard 
          v-for="task in tasks" 
          :key="task.id"
          :title="task.title"
          :description="task.description"
          :status="task.status"
        />
      </div>
    </main>

    <footer>
      <p>Vue.js — Formation Chapitre 3</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import TaskCard from './components/TaskCard.vue'

// Tableau de tâches réactif
const tasks = ref([
  { id: 1, title: 'Créer le composant TaskCard', description: 'Chapitre 2', status: 'done' },
  { id: 2, title: 'Gérer l’état avec ref()', description: 'Chapitre 3', status: 'todo' },
  { id: 3, title: 'Utiliser computed()', description: 'Chapitre 3', status: 'inprogress' }
])

// Computed : tâches terminées
const doneTasks = computed(() => {
  return tasks.value.filter(task => task.status === 'done')
})
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  color: #42b983;
  margin-bottom: 0.5rem;
}

header p {
  color: #666;
  font-size: 0.9rem;
}

.stats {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.task-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}
</style>

Explication du résultat

• Le tableau tasks est déclaré avec ref() → il est réactif.
• doneTasks est un computed() → il se met à jour automatiquement si tasks change.
• Les tâches sont affichées avec v-for → chaque TaskCard reçoit ses props (title, description, status).
• Le composant TaskCard est mis à jour pour afficher le statut (voir ci-dessous).

Mise à jour de TaskCard.vue (pour afficher le statut)

<!-- src/components/TaskCard.vue -->
<template>
  <div class="task-card" :class="status">
    <h3 class="task-title">{{ title }}</h3>
    <p class="task-description">{{ description }}</p>
    <span class="status-badge">{{ status }}</span>
  </div>
</template>

<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: 'Aucune description'
  },
  status: {
    type: String,
    default: 'todo',
    validator: (value) => ['todo', 'inprogress', 'done'].includes(value)
  }
})
</script>

<style scoped>
.task-card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s;
  position: relative;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.task-title {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.1rem;
}

.task-description {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.status-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
}

.task-card.todo .status-badge {
  background: #e74c3c;
}

.task-card.inprogress .status-badge {
  background: #f39c12;
}

.task-card.done .status-badge {
  background: #2ecc71;
}
</style>

Testez-le vous-même !

1. Mettez à jour TaskCard.vue avec le code ci-dessus (ajout du statut).
2. Mettez à jour App.vue avec le code du résultat final.
3. Lancez le serveur :

npm run dev

1. Ouvrez http://localhost:5173 → vous voyez :

• Le nombre total et terminé de tâches
• 3 cartes de tâches avec statut coloré

Prochain chapitre

Dans le chapitre 4, nous aborderons la gestion des événements et les formulaires : vous apprendrez à créer un formulaire pour ajouter une nouvelle tâche, avec validation et gestion des événements.

Tu as maintenant une liste de tâches dynamique, avec un compteur de tâches terminées, et un composant TaskCard qui affiche le statut. C’est la base de toute application de gestion de tâches !

Nous poursuivons avec le chapitre 2 complet de la formation Vue.js, incluant les notions théoriques, les exemples de code, et le résultat final de l’atelier fil rouge : la création d’un composant TaskCard réutilisable, affiché dans App.vue avec des données statiques.

Chapitre 2 : Composants et props

L’objectif de ce second chapitre est de comprendre comment créer des composants réutilisables, les importer dans d’autres composants, et les alimenter avec des données via des props.

Notions à apprendre

1. Qu’est-ce qu’un composant ?

Un composant Vue est un bloc de code (template, script, style) qui peut être réutilisé à plusieurs endroits. Il encapsule sa logique, son rendu et son style.

2. Création d’un composant

• Fichier .vue avec <template>, <script setup>, <style>
• Nom du fichier : PascalCase (ex: TaskCard.vue)
• Import dans un autre composant avec import

3. Props (propriétés)

• Permettent de passer des données d’un composant parent à un composant enfant
• Définies avec defineProps() dans <script setup>
• Typage optionnel avec TypeScript ou validation avec PropTypes

4. Événements personnalisés (emit)

• Pour communiquer de l’enfant vers le parent
• Utilise defineEmits() et $emit() (ou emit() dans <script setup>)

5. Slots

• Permettent d’injecter du contenu HTML dynamique dans un composant
• Syntaxe : <slot></slot> dans le composant, contenu entre les balises dans l’utilisation

Exemple de code : TaskCard.vue

<!-- src/components/TaskCard.vue -->
<template>
  <div class="task-card">
    <h3 class="task-title">{{ title }}</h3>
    <p class="task-description">{{ description }}</p>
  </div>
</template>

<script setup>
// Définition des props
defineProps({
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: 'Aucune description'
  }
})
</script>

<style scoped>
.task-card {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 1rem;
  margin: 0.5rem 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.task-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.task-title {
  margin: 0 0 0.5rem 0;
  color: #333;
  font-size: 1.1rem;
}

.task-description {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}
</style>

Atelier fil rouge : Utiliser TaskCard dans App.vue

Objectif

• Créer le composant TaskCard.vue
• L’importer dans App.vue
• L’utiliser 3 fois avec des données statiques (titre + description)

Résultat final : App.vue mis à jour

<!-- src/App.vue -->
<template>
  <div class="app">
    <header>
      <h1>Mon gestionnaire de tâches</h1>
      <p>Chapitre 2 : Composants et props</p>
    </header>

    <main>
      <TaskCard 
        title="Tâche 1" 
        description="Créer le composant TaskCard" 
      />
      <TaskCard 
        title="Tâche 2" 
        description="Importer le composant dans App.vue" 
      />
      <TaskCard 
        title="Tâche 3" 
        description="Afficher 3 tâches avec des props" 
      />
    </main>

    <footer>
      <p>Vue.js — Formation Chapitre 2</p>
    </footer>
  </div>
</template>

<script setup>
import TaskCard from './components/TaskCard.vue'
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  color: #42b983;
  margin-bottom: 0.5rem;
}

header p {
  color: #666;
  font-size: 0.9rem;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}
</style>

Explication du résultat

• Le composant TaskCard est réutilisable : il peut être utilisé autant de fois que nécessaire.
• Les données sont passées via props (title et description).
• Le composant est isolé : son style est scoped, il n’affecte pas le reste de l’application.
• Le rendu est visuellement cohérent : chaque tâche a un style identique, avec un effet au survol.

Testez le vous-même !

• Créez le fichier src/components/TaskCard.vue avec le code ci-dessus.
• Mettez à jour src/App.vue avec le code du résultat final.
• Lancez le serveur de développement :

npm run dev

• Ouvrez http://localhost:5173 → vous voyez 3 cartes de tâches avec titres et descriptions.

Prochain chapitre

Chapitre 3 : Réactivité et gestion d’état — Apprenez à gérer des tableaux de tâches avec ref() et computed(), et à les afficher dynamiquement avec v-for.

Tu as maintenant un composant réutilisable, bien structuré, avec des props typées et un style propre. C’est la base de toute application modulaire en Vue !

Je vous propose de rentrer dans le vif du sujet avec le Chapitre 1 complet de la formation Vue.js, incluant les notions théoriques, les exemples de code, et le résultat final de l’atelier fil rouge.

Chapitre 1 : Découverte de Vue.js

L’objectif de ce premier chapitre est de comprendre les bases de Vue.js, créer un premier composant réactif, et mettre en place l’atelier fil rouge : une page d’accueil avec titre dynamique mis à jour en temps réel via un champ de saisie.

1. Qu’est-ce que Vue.js ?

Vue.js est un framework progressif pour construire des interfaces utilisateur. Il permet de créer des applications simples (comme un composant) ou complexes (Single Page Application, Progessif Web Application) en utilisant des composants réactifs.

2. Structure d’un composant Vue

Un composant Vue 3 (avec <script setup>) est structuré en 3 parties :

• <template> : le HTML dynamique
• <script setup> : la logique (réactivité, méthodes, etc.)
• <style> : les styles (optionnel, avec scoped pour isoler les styles)

3. Réactivité avec ref()

Vue utilise ref() pour créer des variables réactives. Toute modification de ces variables met à jour automatiquement l’interface.

4. Directives de base

• v-bind (ou :) : lie une propriété HTML à une variable
• v-model : crée un binding bidirectionnel entre un champ et une variable
• v-if : affiche ou cache un élément selon une condition
• v-for : boucle sur une liste pour générer des éléments

Exemple de code : App.vue

<!-- App.vue -->
<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <input 
      v-model="message" 
      placeholder="Éditez-moi !" 
      class="input-field"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Variable réactive
const message = ref('Bonjour Vue 3 !')
</script>

<style scoped>
.container {
  padding: 2rem;
  text-align: center;
}

.input-field {
  width: 100%;
  max-width: 300px;
  padding: 0.5rem;
  font-size: 1rem;
  margin-top: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

h1 {
  color: #42b983;
  font-size: 2rem;
}
</style>

Atelier fil rouge : Page d’accueil dynamique

Objectif

Créer une page où :

• Un titre s’affiche (<h1>)
• Un champ de saisie permet de modifier ce titre en temps réel
• Le titre se met à jour automatiquement à chaque frappe

Résultat final

Voici le code complet de App.vue après réalisation de l’atelier :

<!-- App.vue -->
<template>
  <div class="app">
    <header>
      <h1>{{ pageTitle }}</h1>
      <p>Éditez le titre ci-dessous pour le voir changer en direct !</p>
    </header>

    <main>
      <input
        v-model="pageTitle"
        placeholder="Entrez un nouveau titre..."
        class="title-input"
        autofocus
      />
    </main>

    <footer>
      <p>Vue.js — Formation Chapitre 1</p>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// Variable réactive pour le titre de la page
const pageTitle = ref('Bienvenue dans votre premier composant Vue !')
</script>

<style scoped>
.app {
  font-family: Arial, sans-serif;
  max-width: 600px;
  margin: 2rem auto;
  padding: 2rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

header h1 {
  color: #42b983;
  margin-bottom: 0.5rem;
}

header p {
  color: #666;
  font-size: 0.9rem;
}

.title-input {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.1rem;
  border: 2px solid #42b983;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}

.title-input:focus {
  border-color: #2ecc71;
}

footer {
  margin-top: 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: #999;
}
</style>

Explication du résultat

• pageTitle est une variable réactive créée avec ref().
• v-model="pageTitle" lie le champ de saisie à cette variable → toute modification du champ met à jour pageTitle, et vice versa.
• Le <h1> affiche la valeur de pageTitle → il se met à jour automatiquement.
• Le style est simple mais clair, avec un focus sur l’expérience utilisateur.

Testez-le vous-même !

1. Créez un nouveau projet Vue avec Vite :

npm create vite@latest mon-projet-vue -- --template vue
cd mon-projet-vue
npm install
npm run dev

2. Remplacez le contenu de src/App.vue par le code ci-dessus.

3. Ouvrez http://localhost:5173 dans votre navigateur.

4. Tapez dans le champ → le titre change en temps réel 

Prochain chapitre

Chapitre 2 – Composants et props : Apprenez à créer des composants réutilisables et à les connecter entre eux.

Tu as maintenant ton premier composant Vue fonctionnel, réactif et stylé. C’est le socle de toutes les applications Vue !

Tu peux me demander de t’aider à ajouter des fonctionnalités (ex : bouton “Réinitialiser”, compteur de caractères, etc.) ou passer au chapitre suivant.

Apprenez Vue.js en 11 étapes

Votre plan de formation complet pour construire une application Kanban professionnelle.

Je vous propose un plan de formation détaillé pour maîtriser Vue.js en partant des bases jusqu’à la construction d’une application complète Kanban (gestionnaire de tâches). Ce plan est structuré en chapitres progressifs, avec des notions théoriques, des exemples de code et un atelier fil rouge à réaliser au fur et à mesure.

Vous rêvez de maîtriser Vue.js, le framework moderne, léger et ultra-productif pour créer des interfaces utilisateur réactives ? Vous voulez passer de débutant à développeur capable de livrer une application complète, testée, déployée, et même avec du drag & drop et de la persistance locale ? Alors ce plan de formation est fait pour vous.

Pourquoi ce plan de formation ?

Beaucoup de tutoriels vous apprennent à afficher “Hello World”, puis s’arrêtent là. Ici, vous construisez une application réelle, étape par étape, en partant des bases jusqu’au déploiement en ligne. Pas de théorie inutile. Juste du code, des bonnes pratiques, et des fonctionnalités concrètes.

Le projet final ? Un gestionnaire de tâches Kanban — avec colonnes, drag & drop, persistance, tests, et déploiement. Parfait pour votre portfolio, votre CV, ou votre prochain projet professionnel.

Plan de formation Vue.js — Niveau Débutant à Confirmé

• Prérequis : Connaissances de base en HTML, CSS, JavaScript (ES6+).
• Outils recommandés : Node.js, VS Code, Vite (ou Vue CLI), navigateur (je vous conseille Firefox ou Brave).

Le parcours en 11 chapitres

Chapitre 1 : Découverte de Vue.js

Créez votre premier composant réactif. Comprenez la structure d’un composant Vue 3, les directives de base (v-model, v-for) et la réactivité avec ref().

Notions à apprendre :

• Qu’est-ce que Vue.js ? (framework progressif, composants, réactivité)
• Différences avec React / Angular
• Installation via Vite (recommandé) ou CDN
• Structure d’un composant Vue (template, script, style)
• v-bind, v-model, v-if, v-for

Exemple de code :

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <input v-model="message" placeholder="Éditez-moi !" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Bonjour Vue 3 !')
</script>

Atelier fil rouge :

Créer une page d’accueil avec un titre dynamique et un champ de saisie qui met à jour le titre en temps réel.

Découvrez le Chapitre 1 – Découverte de Vue.js

Chapitre 2 : Composants et props

Apprenez à créer des composants réutilisables comme TaskCard.vue, et à les alimenter avec des données via des props.

Notions à apprendre :

• Création de composants réutilisables
• Props (passage de données parent → enfant)
• Événements personnalisés (emit)
• Communication entre composants
• Slots (contenu dynamique)

Exemple de code :

<!-- TaskCard.vue -->
<template>
  <div class="task">
    <h3>{{ title }}</h3>
    <p>{{ description }}</p>
  </div>
</template>

<script setup>
defineProps({
  title: String,
  description: String
})
</script>

Atelier fil rouge :

Créer un composant TaskCard qui affiche une tâche avec titre et description. Utiliser ce composant dans App.vue avec des données statiques.

Découvrez le Chapitre 2 – Composants et props

Chapitre 3 : Réactivité et gestion d’état

Gérez un tableau de tâches dynamique avec ref() et computed(). Affichez le nombre de tâches terminées en temps réel.

Notions à apprendre :

• ref() et reactive()
• watch() et computed()
• Gestion des tableaux et objets réactifs
• Mutation vs réactivité (éviter les mutations directes)

Exemple de code :

import { ref, computed } from 'vue'

const tasks = ref([
  { id: 1, title: 'Tâche 1', status: 'todo' },
  { id: 2, title: 'Tâche 2', status: 'done' }
])

const doneTasks = computed(() => tasks.value.filter(t => t.status === 'done'))

Atelier fil rouge :

Ajouter un tableau de tâches dans App.vue. Afficher le nombre de tâches terminées via un computed.

Découvrez le Chapitre 3 – Réactivité et gestion d’état

Chapitre 4 : Gestion des événements et formulaires

Ajoutez un formulaire pour créer une nouvelle tâche, avec validation et mise à jour du tableau.

Notions à apprendre :

• Gestion des clics, saisies, soumissions
• Validation de formulaires (vérification basique)
• v-on / @ (syntaxe raccourcie)
• Gestion des erreurs

Exemple de code :

<template>
  <form @submit.prevent="addTask">
    <input v-model="newTaskTitle" placeholder="Titre de la tâche" required />
    <button>Ajouter</button>
  </form>
</template>

<script setup>
import { ref } from 'vue'

const newTaskTitle = ref('')
const tasks = ref([])

function addTask() {
  if (newTaskTitle.value.trim()) {
    tasks.value.push({
      id: Date.now(),
      title: newTaskTitle.value,
      status: 'todo'
    })
    newTaskTitle.value = ''
  }
}
</script>

Atelier fil rouge :

Ajouter un formulaire pour créer une nouvelle tâche. Valider que le titre n’est pas vide

Chapitre 5 : Router (navigation entre pages)

Installez vue-router et créez une page d’accueil et une page de détail de tâche avec paramètres d’URL.

Notions à apprendre :

• Installation de vue-router
• Définition des routes
• Navigation avec <router-link>
• Paramètres de route (:id)
• Navigation programmatique (router.push)

Exemple de code :

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import TaskDetail from '../views/TaskDetail.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/task/:id', component: TaskDetail }
]

const router = createRouter({ history: createWebHistory(), routes })
export default router

Atelier fil rouge :

Créer une page de détail de tâche accessible via /task/:id. Afficher les détails de la tâche sélectionnée.

Chapitre 6 : Pinia (gestion d’état centralisée)

Migrez la gestion des tâches vers un store Pinia. Partagez les données entre composants et pages sans effort.

Notions à apprendre :

• Installation de pinia
• Création d’un store
• Actions, getters, mutations
• Utilisation dans les composants
• Persistance locale (optionnel)

Exemple de code :

// stores/tasks.js
import { defineStore } from 'pinia'

export const useTaskStore = defineStore('tasks', {
  state: () => ({
    tasks: []
  }),
  actions: {
    addTask(title) {
      this.tasks.push({ id: Date.now(), title, status: 'todo' })
    }
  },
  getters: {
    doneTasks: state => state.tasks.filter(t => t.status === 'done')
  }
})

Atelier fil rouge :

Migrer la gestion des tâches vers Pinia. Utiliser le store dans les composants.

Chapitre 7 : Styling et composants UI

Ajoutez des classes dynamiques, des animations avec TransitionGroup, et un bouton “Supprimer” dans chaque tâche.

Notions à apprendre :

• Classes dynamiques (:class, :style)
• Bibliothèques UI : Tailwind CSS, Vuetify, Element Plus (optionnel)
• Composants réutilisables avec slots
• Animation avec Transition et TransitionGroup

Exemple de code :

<template>
  <div :class="{ 'task-done': task.status === 'done' }">
    {{ task.title }}
  </div>
</template>

<style scoped>
.task-done {
  text-decoration: line-through;
  color: #888;
}
</style>

Atelier fil rouge :

Ajouter des styles pour distinguer les tâches « à faire », « en cours », « terminées ». Utiliser des couleurs ou icônes.

Chapitre 8 : Kanban : Structure et drag & drop

Créez les 3 colonnes (todo, in progress, done) et permettez le déplacement des tâches avec vuedraggable.

Notions à apprendre :

• Structure Kanban : colonnes (todo, in progress, done)
• Drag & drop natif ou avec vuedraggable
• Gestion des états de colonnes
• Mise à jour de l’état lors du déplacement

Exemple de code (avec vuedraggable) :

<template>
  <div class="kanban">
    <div v-for="column in columns" :key="column.id" class="column">
      <h3>{{ column.title }}</h3>
      <draggable v-model="column.tasks" item-key="id" group="tasks">
        <template #item="{ element }">
          <TaskCard :title="element.title" />
        </template>
      </draggable>
    </div>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable'
import TaskCard from '@/components/TaskCard.vue'

const columns = ref([
  { id: 'todo', title: 'À faire', tasks: [] },
  { id: 'inprogress', title: 'En cours', tasks: [] },
  { id: 'done', title: 'Terminé', tasks: [] }
])
</script>

Atelier fil rouge :

Créer les 3 colonnes Kanban. Permettre de déplacer les tâches entre colonnes via drag & drop.

Chapitre 9 : Persistance et stockage local

Sauvegardez les tâches dans localStorage et chargez-les au démarrage. Vos données persistent même après un rechargement.

Notions à apprendre :

• localStorage / sessionStorage
• Sauvegarde et chargement des tâches
• Sérialisation/désérialisation JSON
• Gestion des erreurs

Exemple de code :

// Dans le store Pinia
actions: {
  loadFromLocalStorage() {
    const saved = localStorage.getItem('tasks')
    if (saved) this.tasks = JSON.parse(saved)
  },
  saveToLocalStorage() {
    localStorage.setItem('tasks', JSON.stringify(this.tasks))
  }
}

Atelier fil rouge :

Sauvegarder les tâches dans localStorage. Charger les données au démarrage de l’application.

Chapitre 10 : Tests unitaires (optionnel)

Écrivez des tests avec Vitest pour valider le comportement de vos composants et stores. Une bonne pratique professionnelle.

Notions à apprendre :

• Tests avec Vitest
• Tests de composants avec @vue/test-utils
• Tests E2E avec Cypress ou Playwright

Exemple de test :

// tests/unit/TaskCard.spec.js
import { mount } from '@vue/test-utils'
import TaskCard from '@/components/TaskCard.vue'

test('affiche le titre', () => {
  const wrapper = mount(TaskCard, {
    props: { title: 'Test', description: 'Description' }
  })
  expect(wrapper.text()).toContain('Test')
})

Atelier fil rouge :

Écrire un test unitaire pour TaskCard.vue qui vérifie que le titre est affiché.

Chapitre 11 : Déploiement

Générez un build de production et déployez votre application sur Netlify. Partagez le lien avec le monde entier.

Notions à apprendre :

• Build de production avec vite build
• Déploiement sur Netlify, Vercel, GitHub Pages
• Configuration de vite.config.js
• Optimisation (code splitting, minification)

Exemple de commande :

npm run build
npm run preview # pour tester en local

Atelier fil rouge :

Générer un build de production et le déployer sur Netlify ou Vercel.

Projet final : Application Kanban complète

Fonctionnalités attendues :

✅ Ajout/modification/suppression de tâches
✅ Drag & drop entre colonnes
✅ Sauvegarde locale
✅ Interface responsive
✅ Navigation avec router
✅ Gestion d’état avec Pinia
✅ Tests unitaires (optionnel)
✅ Déploiement en ligne

Ce que vous gagnez :

• Une application complète prête à être utilisée ou présentée dans votre portfolio.
• Des compétences réutilisables : composants, réactivité, router, Pinia, drag & drop, tests, déploiement.
• Une architecture professionnelle : séparation des responsabilités, gestion d’état centralisée, tests, optimisation.
• Un projet concret à montrer à vos futurs employeurs ou clients.

Pour qui est-ce ?

• Débutants en Vue.js qui veulent apprendre de A à Z.
• Développeurs qui connaissent déjà les bases et veulent construire une application réelle.
• Étudiants, freelances, ou professionnels en reconversion.
• Tous ceux qui veulent apprendre en faisant, pas en lisant.

À vous de jouer !

Vous avez tout ce qu’il faut pour démarrer. Le plan est structuré, les exemples de code sont complets, et chaque chapitre s’appuie sur le précédent.

Vous n’avez pas besoin d’être un expert pour commencer. Vous avez juste besoin de commencer.
Commencez dès aujourd’hui : créez un nouveau projet Vue avec Vite, suivez le chapitre 1, et construisez votre première application.

Vous n’êtes qu’à 11 étapes de devenir un développeur Vue.js capable de livrer des applications réelles.

Partagez ce plan avec un ami qui veut apprendre Vue.js