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