Vue Academy · Lektion

Skriv komponentberättelser

CSF3-format, standardexport (title, component), namngivna exporter som stories och args.

Lektion 2 av 413 steg

Skriv komponentberättelser är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Stories beskriver komponenttillstånd

En story fångar ett tillstånd hos en komponent – en specifik uppsättning props och innehåll. En knapp kan ha stories för Primary, Secondary och Disabled. Storybook renderar var och en som ett separat exempel som går att bläddra bland.

CSF3: Det moderna formatet

Storybook använder Component Story Format 3 (CSF3). En fil har en default-export som beskriver komponenten och namngivna exporter för varje story. Det är vanliga JavaScript-/TypeScript-objekt med minimalt med repetitiv kod.

Default-exporten (meta)

Default-exporten är objektet meta. Den innehåller minst en title (sökvägen i sidofältet) och den component som dokumenteras.

import Button from "./Button.vue"

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

title organiserar sidofältet

title använder snedstreck för att skapa en mapphierarki i Storybooks sidofält. "Forms/Inputs/TextField" bäddar in tre nivåer.

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

Namngivna exporter är stories

Varje namngiven export är en story-variant. Exportens namn blir storyns etikett i sidofältet.

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

Objektet args

En storys args-objekt anger prop-värden. Storybook skickar dem till komponenten, och panelen Controls låter dig ändra dem direkt.

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

Flera varianter via args

Återanvänd samma komponent i flera stories genom att bara ändra args. Varje export renderar komponenten med andra props.

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

Standardargument i meta

Lägg gemensamma args i meta-objektet; enskilda stories skriver bara över det som skiljer sig. Då följer stories principen DRY.

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

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

Stories med slots via render

För innehåll i slots anger du en render-funktion som returnerar en template med komponenten. Det täcker fall som enbart args inte kan uttrycka.

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

Automatiskt genererad dokumentation med tags

Lägg till tags: ["autodocs"] i meta för att låta Storybook automatiskt generera en dokumentationssida för komponenten utifrån dess props och stories.

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

Vad autodocs skapar

Autodocs-sidan listar komponentens props (namn, typ och standardvärde), visar varje story som ett interaktivt exempel och renderar beskrivande kommentarer – en levande specifikation utan extra filer.

Snabbtest

Kontrollera din förståelse av hur man skriver stories.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du har lärt dig att skriva komponentstories:

En story fångar ett tillstånd hos en komponent; CSF3 använder objektexporter.
Default-exporten är meta med title (sökväg i sidofältet) och component.
Varje namngiven export är en story-variant; args anger dess prop-värden.
Gemensamma args läggs i meta; stories skriver över resten. Använd render för slots.
tags: ["autodocs"] genererar automatiskt en dokumentationssida.

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Skriv komponentberättelser” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Skriv komponentberättelser”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Skriv komponentberättelser”?

CSF3-format, standardexport (title, component), namngivna exporter som stories och args. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Skriv komponentberättelser”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Konfigurera Storybook för Vue 3
Skriv komponentberättelser
Controls, actions och args
Storybook-tillägg och tillgänglighetstester

← Tillbaka till Vue Academy