UNPKG

1.46 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/main/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 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/addons) and a great API to customize as you wish.
27You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want.
28
29## Vue Notes
30
31- When using global custom components or extensions (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```