unovue

unovue / sb-addon-vue-csf

Public

Write Storybook stories in Vue Single File Component syntax.

storybook storybook-addon storybook-vue vue
18
0
100% credibility
Found Mar 06, 2026 at 18 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Storybook addon that enables writing stories for Vue components using Single File Component syntax rather than JavaScript Component Story Format.

How It Works

1
🕵️ Discover the tool

You hear about a handy helper that lets you showcase your user interface building blocks using your familiar Vue component style instead of plain lists.

2
🔧 Add it easily

You add this preview enhancer to your project setup with a simple inclusion step, and tell it to notice your new showcase files.

3
✏️ Write showcase files

You create files for your demos using the same template and script style you're used to for components, defining the main info and individual examples.

4
✨ See demos light up

Your interactive previews appear beautifully in the showcase viewer, complete with slots, children, and custom layouts that feel just right.

5
🎚️ Tweak and save live

You play with settings in the live viewer, like colors or text, and save the changes right back into your demo files effortlessly.

🎉 Professional showcases ready

You now have a stunning, interactive catalog of your UI pieces that your team can explore, speeding up design and development.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 18 to 18 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is sb-addon-vue-csf?

This TypeScript addon for Storybook lets Vue developers write stories in familiar Single File Component syntax, using templates, slots, and script setup instead of plain JS objects. Install via `npx storybook@latest add sb-addon-vue-csf`, add `*.stories.vue` to your stories glob, and define meta with `defineMeta` plus `` tags for args, play functions, and children. It solves the pain of verbose CSF exports, making storybook write stories in typescript feel like regular Vue components.

Why is it gaining traction?

Unlike standard CSF, it supports Vue-native features like slots for children, template overrides, and reusable wrappers with reactive state—perfect for complex UIs. Save from Controls updates `.stories.vue` files directly with Vue-aware parsing, and TypeScript infers args from components. Early adopters love ditching boilerplate for storybook write documentation that doubles as living templates.

Who should use this?

Vue 3 teams on Storybook 8.2+ building component libraries with slots, composition API, or interactive demos. Ideal for frontend devs writing storybook write tests via play functions or maintaining storybook write stories alongside components, especially if Vite workflows frustrate JS-only CSF.

Verdict

Try it if you're deep in Vue/Storybook—docs are thorough, examples run smoothly, tests cover edge cases. With 18 stars and 1.0% credibility, it's immature but stable for the niche; watch for broader adoption before production scale.

(187 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.