Komponenten-Stories schreiben
CSF3-Format, Default-Export (title, component), benannte Exporte als Stories und args
Komponenten-Stories schreiben ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Stories beschreiben Komponentenstatus
Eine Story bildet einen Zustand einer Komponente ab – eine bestimmte Kombination aus Props und Inhalt. Ein Button kann beispielsweise Stories für Primary, Secondary und Disabled haben. Storybook rendert jede davon als separates, durchsuchbares Beispiel.
CSF3: Das moderne Format
Storybook verwendet Component Story Format 3 (CSF3). Eine Datei enthält einen Default-Export, der die Komponente beschreibt, sowie benannte Exporte für jede Story. Dabei handelt es sich um einfache JavaScript-/TypeScript-Objekte – mit minimalem Boilerplate.
Der Default-Export (Meta)
Der Default-Export ist das Meta-Objekt. Es enthält mindestens einen title (den Pfad in der Seitenleiste) und die zu dokumentierende component.
import Button from "./Button.vue"
export default {
title: "Components/Button",
component: Button,
}title strukturiert die Seitenleiste
title verwendet Schrägstriche, um eine Ordnerhierarchie in der Storybook-Seitenleiste zu erstellen. "Forms/Inputs/TextField" verschachtelt drei Ebenen.
export default {
title: "Forms/Inputs/TextField",
component: TextField,
}Benannte Exporte sind Stories
Jeder benannte Export ist eine Story-Variante. Der Name des Exports wird zum Story-Label in der Seitenleiste.
export const Primary = {}
export const Secondary = {}
export const Disabled = {}Das args-Objekt
Das args-Objekt einer Story stellt Prop-Werte bereit. Storybook übergibt sie an die Komponente, und im Controls-Panel können Sie sie direkt anpassen.
export const Primary = {
args: {
label: "Click me",
variant: "primary",
},
}Mehrere Varianten mit args
Verwenden Sie dieselbe Komponente in mehreren Stories wieder, indem Sie nur args ändern. Jeder Export rendert die Komponente mit anderen Props.
export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }Standard-Args im Meta-Objekt
Legen Sie gemeinsame args im Meta-Objekt ab; einzelne Stories überschreiben nur die abweichenden Werte. So bleiben die Stories DRY.
export default {
component: Button,
args: { label: "Button" }, // default for all stories
}
export const Disabled = { args: { disabled: true } }Stories mit Slots über render
Für Inhalte in Slots stellen Sie eine render-Funktion bereit, die ein Template mit der Komponente zurückgibt. Damit lassen sich Fälle abdecken, die allein mit args nicht ausgedrückt werden können.
export const WithIcon = {
render: (args) => ({
components: { Button },
setup() { return { args } },
template: '<Button v-bind="args">⭐ Star</Button>',
}),
}Automatisch generierte Dokumentation mit tags
Fügen Sie dem Meta-Objekt tags: ["autodocs"] hinzu, damit Storybook automatisch aus den Props und Stories eine Dokumentationsseite für die Komponente generiert.
export default {
title: "Components/Button",
component: Button,
tags: ["autodocs"],
}Was autodocs erzeugt
Die autodocs-Seite listet die Props der Komponente auf (Name, Typ, Standardwert), zeigt jede Story als Live-Beispiel und rendert alle Beschreibungskommentare – eine lebende Spezifikation ohne zusätzliche Dateien.
Kurzer Check
Überprüfen Sie Ihr Verständnis vom Schreiben von Stories.
Zusammenfassung
Sie haben gelernt, Component-Stories zu schreiben:
- Eine Story bildet einen Zustand einer Komponente ab; CSF3 verwendet Objekt-Exporte.
- Der Default-Export ist das Meta-Objekt mit
title(Pfad in der Seitenleiste) undcomponent. - Jeder benannte Export ist eine Story-Variante;
argsstellt ihre Prop-Werte bereit. - Gemeinsame Args gehören in das Meta-Objekt; Stories überschreiben die übrigen Werte. Verwenden Sie
renderfür Slots. tags: ["autodocs"]generiert automatisch eine Dokumentationsseite.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Komponenten-Stories schreiben“ kostenlos?
Ja — der vollständige Text von „Komponenten-Stories schreiben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Komponenten-Stories schreiben“?
CSF3-Format, Default-Export (title, component), benannte Exporte als Stories und args Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Komponenten-Stories schreiben“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Storybook für Vue 3 einrichten
- Komponenten-Stories schreiben
- Controls, Actions und Args
- Storybook-Addons und Accessibility-Tests