Vue Academy · Leçon

Écrire des stories de composants

Format CSF3, export par défaut (title, component), exports nommés comme stories et args

Écrire des stories de composants est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Les récits décrivent les états des composants

Un récit représente un état d’un composant : un ensemble précis de propriétés et de contenu. Un bouton peut avoir des récits Primary, Secondary et Disabled. Storybook affiche chacun d’eux comme un exemple distinct que vous pouvez parcourir.

CSF3 : le format moderne

Storybook utilise le format de récits de composants 3 (CSF3). Un fichier contient une exportation par défaut qui décrit le composant et des exportations nommées pour chaque récit. Il s’agit de simples objets JavaScript/TypeScript, avec très peu de code répétitif.

L’exportation par défaut (métadonnées)

L’exportation par défaut est l’objet de métadonnées. Au minimum, il contient un title (le chemin dans la barre latérale) et le component documenté.

import Button from "./Button.vue"

export default {
  title: "Components/Button",
  component: Button,
}

Le titre organise la barre latérale

title utilise des barres obliques pour créer une hiérarchie de dossiers dans la barre latérale de Storybook. "Forms/Inputs/TextField" imbrique trois niveaux.

export default {
  title: "Forms/Inputs/TextField",
  component: TextField,
}

Les exportations nommées sont des récits

Chaque exportation nommée est une variante de récit. Le nom de l’exportation devient le libellé du récit dans la barre latérale.

export const Primary = {}
export const Secondary = {}
export const Disabled = {}

L’objet des arguments

L’objet args d’un récit fournit les valeurs de ses propriétés. Storybook les transmet au composant, et le panneau Contrôles vous permet de les modifier en direct.

export const Primary = {
  args: {
    label: "Click me",
    variant: "primary",
  },
}

Plusieurs variantes avec les arguments

Réutilisez le même composant dans plusieurs récits en ne modifiant que args. Chaque exportation affiche le composant avec des propriétés différentes.

export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }

Arguments par défaut dans les métadonnées

Placez les args partagés dans l’objet de métadonnées ; les récits individuels ne remplacent que les valeurs différentes. Cela respecte le principe DRY.

export default {
  component: Button,
  args: { label: "Button" }, // default for all stories
}

export const Disabled = { args: { disabled: true } }

Récits avec des emplacements via le rendu

Pour du contenu transmis par des emplacements, fournissez une fonction render qui renvoie un modèle utilisant le composant. Cela couvre les cas que les seuls arguments ne permettent pas d’exprimer.

export const WithIcon = {
  render: (args) => ({
    components: { Button },
    setup() { return { args } },
    template: '<Button v-bind="args">⭐ Star</Button>',
  }),
}

Documentation générée automatiquement avec les étiquettes

Ajoutez tags: ["autodocs"] aux métadonnées pour que Storybook génère automatiquement une page de documentation du composant à partir de ses propriétés et de ses récits.

export default {
  title: "Components/Button",
  component: Button,
  tags: ["autodocs"],
}

Ce que produit la documentation automatique

La page de documentation automatique répertorie les propriétés du composant (nom, type et valeur par défaut), affiche chaque récit comme un exemple interactif et restitue les commentaires descriptifs : une spécification vivante sans aucun fichier supplémentaire.

Vérification rapide

Vérifiez votre compréhension de l’écriture des récits.

Récapitulatif

Vous avez appris à écrire des récits de composants :

Un récit représente un état d’un composant ; CSF3 utilise des exportations sous forme d’objets.
L’exportation par défaut contient les métadonnées avec title (le chemin dans la barre latérale) et component.
Chaque exportation nommée est une variante de récit ; args fournit ses valeurs de propriétés.
Les arguments partagés sont placés dans les métadonnées ; les récits remplacent les autres. Utilisez render pour les emplacements.
tags: ["autodocs"] génère automatiquement une page de documentation.

Questions Fréquemment Posées

La leçon « Écrire des stories de composants » est-elle gratuite ?

Oui — le texte complet de « Écrire des stories de composants » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Écrire des stories de composants » ?

Format CSF3, export par défaut (title, component), exports nommés comme stories et args Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Écrire des stories de composants » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Configurer Storybook pour Vue 3
Écrire des stories de composants
Contrôles, actions et args
Modules complémentaires Storybook et tests d’accessibilité

← Retour à Vue Academy