Vue.js

Vue.js repose sur un système de composants réutilisables et un DOM réactif, ce qui signifie que l’interface se met automatiquement à jour lorsque les données changent. Il combine la simplicité du HTML et du JavaScript avec des fonctionnalités avancées comme la gestion de l’état, les directives, les transitions et la composition de composants.

Vue peut être utilisé seul pour enrichir des pages existantes ou avec Vue CLI ou Vite pour construire des applications complètes avec routage, gestion d’état et intégration API.

Installation rapide

Pour démarrer un projet Vue avec Vite :

1npm create vite@latest mon-projet -- --template vue

Puis installez les dépendances et lancez le serveur :

1cd mon-projet
2npm install
3npm run dev

L’application sera disponible sur http://localhost:5173.

Exemple de composant de base

 1<template>
 2  <h1>{{ message }}</h1>
 3</template>
 4 
 5<script>
 6export default {
 7  data() {
 8    return {
 9      message: 'Bonjour depuis Vue.js !'
10    }
11  }
12}
13</script>

Ce composant affiche un titre lié à une propriété message.

Gestion de l’état avec ref et reactive

Vue 3 utilise la Composition API pour gérer l’état de manière réactive :

 1<template>
 2  <div>
 3    <h2>Compteur : {{ compteur }}</h2>
 4    <button @click="incrementer">Incrémenter</button>
 5  </div>
 6</template>
 7 
 8<script setup>
 9import { ref } from 'vue';
10 
11const compteur = ref(0);
12 
13function incrementer() {
14  compteur.value++;
15}
16</script>

Le DOM se met à jour automatiquement lorsque compteur change.

Directives et événements

Vue fournit des directives pour manipuler le DOM et gérer les interactions :

 1<template>
 2  <div>
 3    <input v-model="nom" placeholder="Entrez votre nom">
 4    <p v-if="nom">Bonjour, {{ nom }} !</p>
 5  </div>
 6</template>
 7 
 8<script setup>
 9import { ref } from 'vue';
10 
11const nom = ref('');
12</script>

Ici, v-model lie la valeur de l’input à la variable nom, et v-if conditionne l’affichage.

Composants imbriqués

Vue permet de composer des applications avec des composants enfants :

 1<!-- Composant Enfant -->
 2<template>
 3  <p>Utilisateur : {{ user.nom }}</p>
 4</template>
 5 
 6<script>
 7export default {
 8  props: ['user']
 9}
10</script>
11 
12<!-- Composant Parent -->
13<template>
14  <Child v-for="u in utilisateurs" :key="u.id" :user="u" />
15</template>
16 
17<script setup>
18import { ref } from 'vue';
19import Child from './Child.vue';
20 
21const utilisateurs = ref([
22  { id: 1, nom: 'Aud' },
23  { id: 2, nom: 'Larafrique' }
24]);
25</script>

Appel API avec fetch

 1<template>
 2  <ul>
 3    <li v-for="u in utilisateurs" :key="u.id">{{ u.name }}</li>
 4  </ul>
 5</template>
 6 
 7<script setup>
 8import { ref, onMounted } from 'vue';
 9 
10const utilisateurs = ref([]);
11 
12onMounted(async () => {
13  const res = await fetch('https://jsonplaceholder.typicode.com/users');
14  utilisateurs.value = await res.json();
15});
16</script>

Bonnes pratiques et outils

• Découper l’interface en composants réutilisables pour faciliter la maintenance.
• Utiliser Composition API (setup, ref, reactive) pour plus de clarté et flexibilité.
• Gérer l’état global avec Pinia (remplaçant de Vuex).
• Router avec Vue Router pour créer des applications SPA.
• TypeScript : Vue 3 s’intègre parfaitement avec TypeScript pour plus de sécurité.
• Optimisation : lazy-loading des composants et directives conditionnelles pour les performances.

Vue.js est aujourd’hui l’un des frameworks front-end les plus populaires, apprécié pour sa simplicité, sa flexibilité et sa puissance. Il permet de créer des interfaces interactives, réactives et maintenables, adaptées aux projets de toutes tailles.