ButtonVue — Variantes
✓ Confirmer
↩ Annuler
🗑 Supprimer
⚙ Paramètres
Désactivé
Petit
Normal
Grand
{{ chargement ? 'Chargement…' : '⬆ Envoyer' }}
Cliqué {{ compteurClics }}x
BadgeVue — Couleurs et statuts
✓ Actif
✗ Inactif
⚡ En attente
🔄 Traitement
★ Premium
💚 Vue 3
AlertVue — Notifications en ligne
Info : Votre profil a été mis à jour avec succès.
Succès : Composant enregistré et déployé en production.
Attention : Votre session expirera dans 5 minutes.
Erreur : Impossible de se connecter au serveur.
CardVue — Avec slots nommés
Profil Utilisateur
Actif
A
Alice Dupont
alice@example.com
Modifier
Voir profil
📊
Statistiques
{{ stat.val }}
{{ stat.label }}
↻ Actualiser
Tâches récentes
{{ taches.filter(t=>t.fait).length }}/{{ taches.length }} terminées
Code source — Architecture composants
app.component('ButtonVue', { props: ['variant', 'size', 'disabled'], emits: ['click'] });
app.component('CardVue', { template: `<slot name="header" /> <slot /> <slot name="footer" />` });
app.component('BadgeVue', { props: ['color'] });
app.component('AlertVue', { props: ['type'] });