2018-02-06 12:14:28 +00:00
|
|
|
# Storybook demo for Nuxt
|
2018-02-06 02:36:22 +00:00
|
|
|
|
2018-02-06 12:14:28 +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
|
|
|
|
2018-02-06 12:14:28 +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
|
|
|
|
2018-02-06 12:14:28 +00:00
|
|
|
## Description
|
2018-02-06 11:56:28 +00:00
|
|
|
|
2018-02-06 12:14: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
|
|
|
|
2018-02-06 12:14:28 +00:00
|
|
|
Points of interest
|
2018-02-06 12:20:38 +00:00
|
|
|
|
2018-02-06 12:14:28 +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
|
|
|
|
2018-02-06 12:14: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 12:14:28 +00:00
|
|
|
```
|
2018-02-06 11:56:28 +00:00
|
|
|
npm run storybook
|
|
|
|
|
```
|
2018-02-06 12:20:38 +00:00
|
|
|
|
2018-02-06 12:14:28 +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
|
|
|
|
2018-02-06 12:14:28 +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)
|
