Pourquoi Vue 3 ?
Vue.js est une bibliothèque JavaScript progressive pour construire des interfaces utilisateur modernes et réactives. Avec son écosystème complet et sa communauté active, Vue 3 offre de nombreuses fonctionnalités qui simplifient la création d'applications Web complexes.
Dans un contexte réel, imaginez que vous travaillez sur une application web e-commerce avec plusieurs centaines de produits à afficher. Chaque produit doit être capable de mettre à jour en temps réel sans rafraîchir la page entière. Vue 3 facilite ce processus grâce à ses composants réactifs et à son système de routing, qui permettent une mise à jour fluide des sections spécifiques de l'interface utilisateur.
Prerequis
- Connaissance de base en JavaScript ES6+
- Familiarité avec les concepts de HTML/CSS
- Installation d'un éditeur de code (VSCode recommandé)
- Node.js et npm installés sur votre machine
Concepts fondamentaux
1. Composition API
La Composition API est une nouvelle façon de structurer le code Vue. Elle remplace l'API Options utilisée jusqu'à présent en offrant un contrôle plus granulaire sur les composants.
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
const count = ref(0);
onMounted(() => {
console.log('Component is mounted');
});
const increment = () => {
count.value++;
};
return {
count,
increment
};
}
};
</script>
2. Teleport
Le Teleport est une fonctionnalité qui permet de déplacer le rendu d'un élément à un emplacement différent dans l'arbre DOM.
<template>
<div id="app">
<button @click="openModal = true">Open Modal</button>
<teleport to="#modal-container">
<div v-if="openModal" class="modal">
<p>This is a modal!</p>
<button @click="openModal = false">Close</button>
</div>
</teleport>
</div>
</template>
<script>
export default {
data() {
return {
openModal: false
};
}
};
</script>
<style>
#modal-container .modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
</style>
3. Suspense
Le Suspense est une fonctionnalité qui permet de gérer les données asynchrones en affichant un contenu de repli jusqu'à ce que les données soient disponibles.
<template>
<suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</suspense>
</template>
<script>
import AsyncComponent from './AsyncComponent.vue';
export default {
components: {
AsyncComponent
}
};
</script>
4. Fragments
Vue 3 permet de retourner plusieurs éléments à partir d'un seul composant, en utilisant des Fragments.
<template>
<h1>Title</h1>
<p>Paragraph</p>
</template>
<script>
export default {
name: 'MyComponent'
};
</script>
Mise en pratique : projet fil rouge
Mini-projet : Gestionnaire de tâches
Étape 1 : Initialisation du projet
npm init -y
npm install vue@next
mkdir src
touch src/main.js src/App.vue
Étape 2 : Structure de base
<!-- src/main.js -->
import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');
vue
<!-- src/App.vue -->
<template>
<div id="app">
<h1>Gestionnaire de Tâches</h1>
<ul>
<li v-for="(task, index) in tasks" :key="index">task</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
tasks: ['Acheter du pain', 'Faire le ménage']
};
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Étape 3 : Ajout d'une tâche
<!-- src/App.vue -->
<template>
<div id="app">
<h1>Gestionnaire de Tâches</h1>
<ul>
<li v-for="(task, index) in tasks" :key="index">task</li>
</ul>
<input v-model="newTask" placeholder="Nouvelle tâche" />
<button @click="addTask">Ajouter</button>
</div>
</template>
<script>
export default {
data() {
return {
tasks: ['Acheter du pain', 'Faire le ménage'],
newTask: ''
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.tasks.push(this.newTask);
this.newTask = '';
}
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
input, button {
padding: 8px;
margin: 10px;
}
</style>
Étape 4 : Suppression d'une tâche
<!-- src/App.vue -->
<template>
<div id="app">
<h1>Gestionnaire de Tâches</h1>
<ul>
<li v-for="(task, index) in tasks" :key="index">
task
<button @click="removeTask(index)">Supprimer</button>
</li>
</ul>
<input v-model="newTask" placeholder="Nouvelle tâche" />
<button @click="addTask">Ajouter</button>
</div>
</template>
<script>
export default {
data() {
return {
tasks: ['Acheter du pain', 'Faire le ménage'],
newTask: ''
};
},
methods: {
addTask() {
if (this.newTask.trim()) {
this.tasks.push(this.newTask);
this.newTask = '';
}
},
removeTask(index) {
this.tasks.splice(index, 1);
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
input, button {
padding: 8px;
margin: 10px;
}
</style>
Erreurs frequentes et debugging
Erreur 1 : Cannot read property 'value' of undefined
## ❌ Mauvais
const count = ref(0);
console.log(count.value);
## ✅ Correct
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // Fonctionne maintenant
Erreur 2 : Unknown custom element: <my-component>
## ❌ Mauvais
<template>
<div>
<my-component></my-component>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
## ✅ Correct
<template>
<div>
<MyComponent></MyComponent>
</div>
</template>
<script>
import MyComponent from './MyComponent.vue';
export default {
components: {
MyComponent
},
name: 'App'
};
</script>
Erreur 3 : Template syntax error
## ❌ Mauvais
<template>
<div v-if="true">
{{ message
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
}
};
</script>
## ✅ Correct
<template>
<div v-if="true">
message
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
}
};
</script>
Pour aller plus loin
Piste 1 : Utiliser les Composition API
Découvrez comment utiliser davantage de fonctions comme watch, computed, et provide/inject pour gérer votre état d'application.
Piste 2 : Optimisation des performances
Explorez les techniques de rendu conditionnel, le shouldComponentUpdate et la virtualisation pour améliorer les performances de vos composants.
Piste 3 : Créer un plugin personnalisé
Apprenez à créer votre propre plugin Vue pour ajouter des fonctionnalités réutilisables à votre application.
Défi pratique
Créez une application simple de compteur qui affiche le nombre de clics effectués. Lorsque le compteur atteint 10, un message d'alerte devrait s'afficher indiquant "Bravo ! Vous avez atteint 10 clics". Utilisez la Composition API pour cette application.