Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mattrothenberg/vue-storybook
Custom <story> blocks for Vue single file components
https://github.com/mattrothenberg/vue-storybook
storybook styleguide vue vuejs
Last synced: about 1 month ago
JSON representation
Custom <story> blocks for Vue single file components
- Host: GitHub
- URL: https://github.com/mattrothenberg/vue-storybook
- Owner: mattrothenberg
- Created: 2018-03-03T22:30:50.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T23:58:04.000Z (about 2 years ago)
- Last Synced: 2024-06-19T03:03:15.584Z (6 months ago)
- Topics: storybook, styleguide, vue, vuejs
- Language: JavaScript
- Homepage:
- Size: 630 KB
- Stars: 148
- Watchers: 4
- Forks: 15
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# vue-storybook
Custom `` blocks for Vue single file components that work out of the box with Vue CLI 3 and [`vue-cli-plugin-storybook`](https://github.com/storybooks/vue-cli-plugin-storybook).
[](https://badge.fury.io/js/vue-storybook)
```bash
yarn add vue-storybook
```
```js
const { storyLoader, registerStories } = require("vue-storybook");
```
## What is this?
A **Webpack loader** + **helper script** that allows you to embellish your pre-existing Vue single file components (SFC) with a custom `` block that's automatically translated into a [Storybook](https://github.com/storybooks/storybook)-flavored story.
### Hello World Example
Repo: https://github.com/mattrothenberg/vue-storybook-example-project
```vue
Can't touch this
```
turns into:
## How does it work?
Given an existing Vue CLI + `vue-cli-plugin-storybook` project, modify your project's `vue.config.js` thusly.
```js
// vue.config.js
module.exports = {
chainWebpack: config => {
config.resolve.symlinks(false);
},
configureWebpack: config => {
config.module.rules.push({
resourceQuery: /blockType=story/,
loader: "vue-storybook"
});
}
};
```
Add a custom `` block to your single file component. The following Storybook plugins/APIs are supported:
- Actions
- Story Options
- Notes
- Knobs
It is also possible to pass options for other addons using the `parameters` attribute.
You can optionally group components by specifiying a `group` attribute.
```vue
{{initialText}}
```
Then, in your main `index.stories.js` (or wherever your write your stories), leverage our helper script to start adding stories. NB: the signature of `registerStories` has changed significantly.
```js
registerStories(req, filename, storiesOf, config);
```
`config` is now an object with the following keys,
```js
{
knobs: {
// put the knobs you plan on using
// (things like `text` or `select`)
// in this object
},
decorators: [
// an array of decorator functions
],
methods: {
action // where action is the exported member from `addon-actions`
}
}
```
```js
// Import Storybook + all 'yr plugins!
import { storiesOf } from "@storybook/vue";
import { action } from "@storybook/addon-actions";
import { withNotes } from "@storybook/addon-notes";
import { withKnobs, text, boolean } from "@storybook/addon-knobs/vue";
// Import our helper
import { registerStories } from "vue-storybook";
// Require the Vue SFC with blocks inside
const req = require.context("./", true, /\.vue$/);
// Programatically register these stories
function loadStories() {
req.keys().forEach(filename => {
let config = {
knobs: {
text,
boolean
},
decorators: [
withKnobs,
function(context, story) {
return {
template: `
`
};
}
],
methods: {
action
}
};
registerStories(req, filename, storiesOf, config);
});
}
// Let's go!
configure(loadStories, module)
```
## Roadmap
- [x] Actions
- [x] Knobs
- [x] Notes
- [ ] Info
- [ ] Readme