• Stars
    star
    279
  • Rank 147,967 (Top 3 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 6 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Vue CLI plugin for Storybook

vue-cli-plugin-storybook

Vue CLI plugin for Storybook

Installation

$ vue add storybook

Or to install the next major version for vue-cli-5, please run

$ vue add storybook@next

Usage

It will create a config folder for storybook, a sample component and a sample story. The webpack config used for storybook is resolved from vue-cli-service, which means you don't need to have any special webpack section in storybook config folder.

However, storybook will filter all the plugins for webpack according to internal list of allowed plugins. If you are extending your config with your custom plugins, you can extend list of allowed plugins by passing their names through pluginOptions in your vue.config.js like this:

{
  pluginOptions: {
    storybook: {
      allowedPlugins: [
        'define'
      ]
    }
  }
}

The name of the plugin is the string used in webpack-chains config.plugin(...) call.

Note that only plugins defined with webpack-chain config can be filtered using the allowedPlugins option. Plugings defined through configureWebpack will always be included in the final webpack config.

Contributors

Here is a list of Contributors

We particularly thank Almas Akchabayev <[email protected]> for the initial code and willing to transfer the project to us.

TODO

I accept pull requests and guarantee a reply back within a day

License

MIT/X11

Bug Reports

Report here. Guaranteed reply within a day.

Contact

Pavan Kumar Sunkara ([email protected])

Follow me on github, twitter

More Repositories

1

storybook

Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
TypeScript
83,871
star
2

design-system

🗃 Storybook Design System
TypeScript
1,910
star
3

react-native

📓 Storybook for React Native!
TypeScript
1,024
star
4

builder-vite

A builder plugin to run and build Storybooks with Vite
TypeScript
890
star
5

addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.
TypeScript
875
star
6

react-inspector

🔍 Power of Browser DevTools inspectors right inside your React app
TypeScript
768
star
7

testing-react

Testing utilities that allow you to reuse your Storybook stories in your React unit tests!
TypeScript
588
star
8

presets

🧩 Presets for Storybook
TypeScript
424
star
9

marksy

📑 A markdown to custom VDOM components library
JavaScript
354
star
10

eslint-plugin-storybook

🎗Official ESLint plugin for Storybook
TypeScript
243
star
11

addon-jsx

This Storybook addon show you the JSX / template of the story
TypeScript
236
star
12

test-runner

🚕 Turn stories into executable tests
TypeScript
226
star
13

frontpage

🌐 The website for storybook.js.org
TypeScript
214
star
14

storybook-addon-console

storybook-addon. Redirects console output into action logger panel
TypeScript
200
star
15

native

📱 Storybook for Native: iOS, Android, Flutter
TypeScript
186
star
16

telejson

🛰 JSON parse & stringify with support for cyclic objects, functions, dates, regex, infinity, undefined, null, NaN, Classes, Instances
TypeScript
167
star
17

babel-plugin-react-docgen

📝 Babel plugin to add react-docgen info into your code.
JavaScript
162
star
18

addon-kit

Everything you need to build a Storybook addon
TypeScript
137
star
19

vs-code-plugin

Aesop: a VSCode Extension to stage Storybook stories inside your IDE.
TypeScript
131
star
20

addon-svelte-csf

[Incubation] CSF using Svelte components.
TypeScript
99
star
21

brand

🎨 Materials for your articles and talks about storybook
93
star
22

addon-react-native-web

Build react-native-web projects in Storybook for React
TypeScript
76
star
23

desktop

💻 Desktop app for all your Storybooks
JavaScript
72
star
24

testing-library

Instrumented version of Testing Library for Storybook Interactions
TypeScript
56
star
25

require-context.macro

🖇 A Babel macro needed for some advanced Storybook setups. Used to mock webpack's context function in test environments.
JavaScript
48
star
26

solidjs

SolidJS integration for Storybook, maintained by the community
TypeScript
44
star
27

addon-styling

A base addon for configuring popular styling tools
TypeScript
44
star
28

ember-cli-storybook

📒 Ember storybook adapter
JavaScript
37
star
29

sandboxes

MDX
35
star
30

aem

Adobe Experience Manager Storybook app with events, knobs, docs, addons, and more
JavaScript
33
star
31

paths.macro

👣 Babel plugin that returns an object containing paths like __dirname and __filename as static values
JavaScript
32
star
32

shout-out-kit

An image generation API template
JavaScript
30
star
33

linter-config

📐 ESlint config, Prettier config, Remark config for storybook
JavaScript
27
star
34

addon-styling-webpack

Successor to @storybook/addon-styling. Configure the styles of your webpack storybook with ease!
TypeScript
26
star
35

SBNext

A future SB
JavaScript
26
star
36

addon-postcss

This Storybook addon can be used to run the PostCSS preprocessor against your stories.
JavaScript
21
star
37

addon-measure

JavaScript
20
star
38

addon-coverage

TypeScript
19
star
39

jest

Instrumented version of Jest for Storybook Interactions
TypeScript
18
star
40

nextjs-example

Example app showing Storybook integrated with Next.js (v11) pages
JavaScript
18
star
41

testing-vue3

Testing utilities that allow you to reuse your stories in your unit tests
TypeScript
16
star
42

bench

Storybook benchmark
TypeScript
15
star
43

nextjs-server

Embedded Storybook in Next.js
TypeScript
14
star
44

mdx2-csf

MDX to CSF compiler using MDXv2
TypeScript
14
star
45

testing-angular

TypeScript
13
star
46

addon-knobs

Storybook addon prop editor component
TypeScript
12
star
47

storybook-rsc-demo

Project demo to showcase Storybook's new module mocking functionality
TypeScript
12
star
48

testing-vue

TypeScript
10
star
49

addon-google-analytics

Storybook addon for google analytics
JavaScript
10
star
50

jest-storybook

Test storybook stories automagically using Jest. 🧙🏻‍♀️
JavaScript
9
star
51

storybook-nuxt

Storybook integration for Nuxt Framework - Unleashing the power of Storybook in Nuxt/Vue Land!
TypeScript
9
star
52

icons

Library of icons used in apps and marketing sites
TypeScript
9
star
53

expect

Browser-compatible version of Jest's `expect`
JavaScript
8
star
54

create-svelte-with-args

A small CLI wrapper around the create-svelte package that enables you to replace the interactive prompts with CLI arguments.
JavaScript
8
star
55

addon-queryparams

parameter addon for storybook
TypeScript
8
star
56

addon-cssresources

A storybook addon to switch between css resources at runtime for your story
TypeScript
7
star
57

addon-graphql

Storybook addon to display the GraphiQL IDE
TypeScript
7
star
58

action

🚢 WIP, storybook github action - build your storybook from github
JavaScript
7
star
59

addon-events

Add events to your Storybook stories.
TypeScript
6
star
60

addon-design-assets

Design asset preview for storybook
JavaScript
6
star
61

vue3-code-examples

it is a repo to show Vuetify implementation with new @storybook/vue3 reactive mode
TypeScript
6
star
62

addon-react-native-server

A replacement for @storybook/react-native-server which will enable multiple devices to sync over websockets
TypeScript
6
star
63

raycast-extension-sandboxes

A Raycast Extension to quickly create sandboxes online or locally
TypeScript
6
star
64

marko

Storybook framework support for marko
TypeScript
6
star
65

addon-onboarding

TypeScript
6
star
66

storybook-day

Storybook day website
TypeScript
5
star
67

addon-ie11

JavaScript
5
star
68

components-marketing

TypeScript
5
star
69

web

Storybook documentation site
TypeScript
5
star
70

governance

⚖️ Storybook governance and community policies
4
star
71

docs2-prototype

TypeScript
4
star
72

community

🙌 Storybook community resources: monthly meetings, meetups, conferences
4
star
73

mdx1-csf

MDX to CSF compiler using MDXv1
TypeScript
4
star
74

docs-mdx

TypeScript
3
star
75

addon-angular-ivy

TypeScript
3
star
76

babel-plugin-named-exports-order

Babel plugin for preserving exports order across transforms
JavaScript
3
star
77

ember

Storybook for Ember
TypeScript
3
star
78

addon-bench

Storybook benchmarking helper
JavaScript
3
star
79

repro-react-cra

Reproduction template for Create React App
JavaScript
3
star
80

react-native-demo

Storybook for React Native monorepo
2
star
81

repro-templates

WIP
JavaScript
2
star
82

eslint-config-storybook

🔗 wrapper around our @storybook/linter-config package
JavaScript
2
star
83

vitest-plugin

Highly experimental Storybook vitest plugin
TypeScript
2
star
84

.github

Repo community health files
1
star
85

e2e-testing-starter

JavaScript
1
star
86

vue3-autogen-controls

TypeScript
1
star
87

stencil-builder-test

TypeScript
1
star
88

svelte-csf-demo

Demonstrating Svelte CSF (@storybook/addon-svelte-csf) vs regular CSF3
Svelte
1
star
89

auto-config

TypeScript
1
star
90

external-sandboxes

MDX
1
star
91

addon-webpack5-compiler-swc

Adds SWC as a Webpack5 compiler to Storybook
TypeScript
1
star
92

playwright-ct

Playwright component testing against a Storybook instance
TypeScript
1
star
93

create-webpack5-react

JavaScript
1
star
94

addon-webpack5-compiler-babel

Adds babel as a Webpack5 compiler to Storybook
TypeScript
1
star
95

vite-plugin-storybook-nextjs

TypeScript
1
star