Nuxt/examples/storybook/README.md

45 lines
1.3 KiB
Markdown
Raw Normal View History

# Storybook demo for Nuxt
2018-02-06 02:36:22 +00:00
Demo showcasing [Storybook](https://storybook.js.org/) usage with Nuxt.js, [Vuetify](https://vuetifyjs.com) and [Vue-Charts](http://vue-chartjs.org/)
2018-02-06 02:36:22 +00:00
## Features
2018-02-06 02:36:22 +00:00
2018-02-06 12:20:38 +00:00
* Supports `~` and `~~` Nuxt.js aliases
* Contains `storybase.js` with helper classes
* Integrates most of addons
* Real life examples with Vuetify and Vue-Charts
2018-02-06 11:56:28 +00:00
## Description
2018-02-06 11:56:28 +00:00
This demo aims to integrate all the above mentioned technologies with best practices in mind.
2018-02-06 11:56:28 +00:00
Points of interest
2018-02-06 12:20:38 +00:00
* `.storybook` folder contains storybook configuration
* `stories` folder has number of stories corresponding to `components`
* Note, Storybook is configured to understand Nuxt aliases `~` and `~~`
2018-02-06 12:20:38 +00:00
* Number of helpers in `storybase.js` to simplify storybook usahe
2018-02-06 11:56:28 +00:00
## Usage
2018-02-06 11:56:28 +00:00
2018-02-06 12:20:38 +00:00
To run locally in dev mode
```
2018-02-06 11:56:28 +00:00
npm run storybook
```
2018-02-06 12:20:38 +00:00
and then access the storybook from [localhost:9001](http://localhost:9001)
To build static storybook to `.out` folder
2018-02-06 12:20:38 +00:00
```
npm run storybookoutput
```
## More reading
* [Using Storybook with Nuxt](https://davidwalsh.name/storybook-nuxt) by David Walsh
* [StoryBook for Vue](https://github.com/storybooks/storybook/tree/master/app/vue)
* [Vue Kitchen sink Storybook demo](https://github.com/storybooks/storybook/tree/master/examples/vue-kitchen-sink)
* [Vuetify Storybook boilerplate](https://github.com/white-rabbit-japan/vuetify-storyboard-boilerplate)