From bc4140a46e4a11a6533e2f7017696acc342e89c7 Mon Sep 17 00:00:00 2001 From: HG Date: Tue, 6 Feb 2018 12:14:28 +0000 Subject: [PATCH] updated readme on running storybook with nuxt detailed description on running storybook with vue --- examples/storybook/README.md | 39 ++++++++++++++++++++++++++---------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/examples/storybook/README.md b/examples/storybook/README.md index 5310842148..e6645861a2 100644 --- a/examples/storybook/README.md +++ b/examples/storybook/README.md @@ -1,24 +1,41 @@ -## Storybook demo for Nuxt +# Storybook demo for Nuxt -Deo showcasing [Storybook](https://storybook.js.org/) usage with Nuxt.js, [Vuetify](https://vuetifyjs.com) and [Vue-Charts](http://vue-chartjs.org/) +Demo showcasing [Storybook](https://storybook.js.org/) usage with Nuxt.js, [Vuetify](https://vuetifyjs.com) and [Vue-Charts](http://vue-chartjs.org/) -### Features +## Features * supports '~' and '~~' Nuxt.js aliases * contains storybase.js with helper classes * integrates most of addons * real life examples with Vuetify and Vue-Charts -### Usage +## Description -Start the example o [http://localhost:3000](http://localhost:3000): +This demo aims to integrate all the above mentioned technologies with best practices in mind. -```bash -npm run dev +Points of interest +* `.storybook` folder contains storybook configuration +* `stories` folder has number of stories corresponding to `components` +* Note, Storybook is configured to understand Nuxt aliases `~` and `~~` +* number of helpers in storybase.js to simplify storybook usahe + +## Usage + +To run locally in dev mode ``` - -Run Storybook: - -```bash npm run storybook ``` +and then access the storybook from [localhost:9001](http://localhost:9001) + +To build static storybook to `.out` folder +``` +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)