1 | # Storybook for Vue
|
2 |
|
3 | Storybook for Vue is a UI development environment for your Vue components.
|
4 | With 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 |
|
8 | Storybook runs outside of your app.
|
9 | So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
|
10 |
|
11 | ## Getting Started
|
12 |
|
13 | ```sh
|
14 | cd my-vue-app
|
15 | npx -p @storybook/cli sb init
|
16 | ```
|
17 |
|
18 | For 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 |
|
26 | Storybook 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.
|
27 | You 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 |
|
35 | In Storybook story and decorator components you can not access the Vue instance
|
36 | in 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 | ```
|