Premiers composants

Ce que tu vas apprendre

• Afficher des boutons, des cartes et des badges avec leurs props principales.
• Ajouter des icônes grâce à la collection Lucide.
• Assembler ces pièces dans une carte de recette.

Un bouton

Voici un bouton qui mène à la liste des recettes :

<UButton label="Voir les recettes" to="/recettes" />

label est le texte. to transforme le bouton en lien vers une page du site.

Les réglages se passent par des props, des attributs qui configurent le composant. Trois comptent surtout :

<UButton label="Supprimer" color="error" variant="outline" size="lg" />

Des icônes

Les icônes viennent de collections gratuites. Installe celle de Lucide :

npm install @iconify-json/lucide

Le nom d'une icône suit le modèle i-lucide-<nom>. Tu peux l'utiliser seule avec UIcon, ou dans un bouton :

<UIcon name="i-lucide-chef-hat" />
<UButton label="Ajouter" icon="i-lucide-plus" />
<UButton label="Suivant" trailing-icon="i-lucide-arrow-right" />

icon place l'icône avant le texte, trailing-icon après. Le catalogue des noms est sur le site Lucide ou sur Iconify.

Un bouton en chargement

La prop loading affiche un indicateur et empêche de recliquer. Elle suit une variable :

<script setup lang="ts">
const envoi = ref(false)
</script>

<template>
  <UButton label="Publier" :loading="envoi" @click="envoi = true" />
</template>

Les deux-points devant loading signifient que la valeur est une variable et non un texte.

Un badge

UBadge est une petite étiquette. Elle sert à marquer un état ou une catégorie.

<UBadge label="Végétarien" color="success" variant="subtle" />

Il partage les props color, variant et size du bouton. La variante link n'existe pas pour lui.

Une carte

UCard est un conteneur avec trois zones, appelées slots : header, le contenu par défaut et footer. On les remplit avec #header et #footer.

<UCard>
  <template #header>
    <h3>Tarte aux pommes</h3>
  </template>

  <p>Une pâte brisée, des pommes, du beurre.</p>

  <template #footer>
    <UButton label="Lire la recette" to="/recettes/tarte-aux-pommes" />
  </template>
</UCard>

Le contenu hors <template> va dans la zone centrale.

Assembler une carte de recette

Mets le tout dans un composant réutilisable :

<script setup lang="ts">
defineProps<{ titre: string, duree: number }>()
</script>

<template>
  <UCard>
    <template #header>
      <h3>{{ titre }}</h3>
      <UBadge label="Dessert" variant="soft" />
    </template>
    <p><UIcon name="i-lucide-clock" /> {{ duree }} minutes</p>
    <template #footer>
      <UButton label="Lire" icon="i-lucide-book-open" />
    </template>
  </UCard>
</template>

defineProps déclare ce que la carte reçoit, comme dans le cours sur les composants Nuxt.

À retenir

• UButton se règle avec label, color, variant, size, icon et to.
• loading affiche un état d'attente sur un bouton.
• Les icônes s'écrivent i-lucide-<nom> après npm install @iconify-json/lucide.
• UBadge marque un état ; UCard offre les slots header, centre et footer.
• Les mêmes props color, variant et size reviennent sur la plupart des composants.