0Pricing
Vue Academy · Lesson

Writing Component Stories

CSF3 format, default export (title, component), named exports as stories, args.

Writing Component Stories is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Stories Describe Component States

A story captures one state of a component — a specific set of props and content. A button might have Primary, Secondary, and Disabled stories. Storybook renders each as a separate, browsable example.

CSF3: The Modern Format

Storybook uses Component Story Format 3 (CSF3). A file has one default export describing the component and named exports for each story. It is plain JavaScript/TypeScript objects — minimal boilerplate.

The Default Export (Meta)

The default export is the meta object. At minimum it has a title (the sidebar path) and the component being documented.

import Button from "./Button.vue"

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

The title Organizes the Sidebar

title uses slashes to create a folder hierarchy in the Storybook sidebar. "Forms/Inputs/TextField" nests three levels deep.

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

Named Exports Are Stories

Each named export is a story variant. The export name becomes the story label in the sidebar.

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

The args Object

A story’s args object supplies prop values. Storybook passes them to the component, and the Controls panel lets you tweak them live.

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

Multiple Variants via args

Reuse the same component across stories by changing only args. Each export renders the component with different props.

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

Default Args on Meta

Put shared args on the meta object; individual stories override only what differs. This keeps stories DRY.

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

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

Stories with Slots via render

For slotted content, provide a render function that returns a template using the component. This covers cases args alone cannot express.

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

Auto-Generated Docs with tags

Add tags: ["autodocs"] to the meta to make Storybook generate a documentation page for the component automatically, from its props and stories.

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

What autodocs Produces

The autodocs page lists the component’s props (name, type, default), shows each story as a live example, and renders any description comments — a living spec with zero extra files.

Quick Check

Check your understanding of writing stories.

Recap

You learned to write component stories:

  • A story captures one state of a component; CSF3 uses object exports.
  • The default export is meta with title (sidebar path) and component.
  • Each named export is a story variant; args supplies its prop values.
  • Shared args go on meta; stories override the rest. Use render for slots.
  • tags: ["autodocs"] auto-generates a documentation page.

Frequently asked questions

Is the “Writing Component Stories” lesson free?

Yes — the full text of “Writing Component Stories” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “Writing Component Stories”?

CSF3 format, default export (title, component), named exports as stories, args. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Writing Component Stories” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Setting Up Storybook for Vue 3
  2. Writing Component Stories
  3. Controls, Actions, and Args
  4. Storybook Addons and Accessibility Testing
← Back to Vue Academy