Storybook Vue

instructions.md

1. minimal install : npm i --save-dev @storybook/vue@next @storybook/addon-knobs@rc @storybook/addon-actions@rc

2. peer dependencies from storybook : npm i --save-dev babel-loader vue-loader vue-template-compiler && npm i --save vue

3. package related peer dependencies: npm i --save-dev @babel/core babel-preset-vue

4. add run script to package.json :

   "scripts" {
   +  "storybook": "start-storybook -p 9001 -c .storybook"
   },

5. minimal .storybook/config.js :

   import { configure } from '@storybook/vue';
   
   configure(() => {
     require('../stories')
   }, module);

6. configure addons in .storybook/addons.js :

   import '@storybook/addon-knobs/register';
   import '@storybook/addon-actions/register';

7. minimal entrypoint with demo :

   import { storiesOf } from '@storybook/vue';
   
   storiesOf('demo', module)
     .add('simple', () => ({
       template: '<span>hello world</span>',
     }));

8. a demo with knob control :

   import { storiesOf } from '@storybook/vue';
   import { withKnobs, text } from '@storybook/addon-knobs';
   
   storiesOf('demo', module)
     .addDecorator(withKnobs)
     .add('knobs', () => ({
       template: '<span @click="i++">My name is {{ name }} and i am {{ i }} years old.</span>',
   
       props: {
         name: {
           default: text('name', 'John Doe')
         }
       },
   
       data() { return {
         i: 40,
       }; },
     }));