UNPKG

1.51 kBMarkdownView Raw
1# Storybook for Vue
2
3Storybook for Vue is a UI development environment for your Vue components.
4With it, you can visualize different states of your UI components and develop them interactively.
5
6![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
7
8Storybook runs outside of your app.
9So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
10
11## Getting Started
12
13```sh
14cd my-vue-app
15npx -p @storybook/cli sb init
16```
17
18For more information visit: [storybook.js.org](https://storybook.js.org)
19
20## Starter Storybook-for-Vue Boilerplate project with [Vuetify](https://github.com/vuetifyjs/vuetify) Material Component Framework
21
22<https://github.com/white-rabbit-japan/vue-vuetify-storybook>
23
24---
25
26Storybook also comes with a lot of [addons](https://storybook.js.org/docs/vue/configure/storybook-addons) and a great API to customize as you wish.
27You can also build a [static version](https://storybook.js.org/docs/vue/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
28
29## Vue Notes
30
31- When using global custom components or extension (e.g `Vue.use`). You will need to declare those in the `./storybook/preview.js`.
32
33## Known Limitations
34
35In Storybook story and decorator components you can not access the Vue instance
36in factory functions for default prop values:
37
38```js
39{
40 props: {
41 foo: {
42 default() {
43 return this.bar; // does not work!
44 }
45 }
46 }
47}
48```