Storybook with Vue.js

import Vue from 'vue';

import { storiesOf } from '@storybook/vue';

import MyButton from './Button.vue';

storiesOf('MyButton', module)
  .add('story as a template', () => '<my-button :rounded="true">story as a function template</my-button>')
  .add('story as a component', () => ({
    components: { MyButton },
    template: '<my-button :rounded="true">rounded</my-button>'
  }));

{
  "scripts": {
    "storybook": "start-storybook -p 6006 -c .storybook -s ./ "
  }
}

npm run storybook

storiesOf('공통/MainTabs', module)
  .add('Tab이 비엇을때 ', () => {
    return {
      components: { MainTabs },
      template: template('<main-tabs :tabs="tabs"/>'),
      data() {
        return {
          tabs: [
            { id:1, name: 'Home Menu', cssClass: 'home', },
            { id:2, name: 'Menu 1',  },
            { id:3, name: 'Menu 2', },
          ],
        };
      },
    };
  })

{
  "scripts": {
    "start-storybook": "start-storybook -s ./public,./static -p 9001"
  }
}

storiesOf('공통/Breadcrumb', module);
storiesOf('공통/Gnb', module);
storiesOf('공통/GNB + MainTabs', module);

import { withKnobs, text, boolean, number, select } from '@storybook/addon-knobs/vue';

export function cartCount(count = 8) {
  return number('Cart No', count);
}

storiesOf('Common/StatusBar', module);
story
  .addDecorator(withKnobs);

story
  .add('Empty cart', () => ({
      components: { StatusBar },
      template: '<status-bar :cartCount="${cartCount(0)}"/>',
    });
  })

import StoryRouter from 'storybook-vue-router';

const story = storiesOf('공통/MainTabs', module);
story
  .addDecorator(withKnobs)
  .addDecorator(StoryRouter());

const width = 640;
const height = 720;

export default function (content) {
  return '<div><span>Width: ${width}px Height: ${height}px</span>'+
  '<div style="border:1px dotted; border-color: #f00; width: ${width}px; height: ${height}x; background-color: #000">' + content + '</div></div>';
};

import template from './template.js';

storiesOf('CategoryTitle', module)
  .add('No title', () => ({
    components: { CategoryTitle },
    template: template('<category-title  />'),
    methods: {},
  }))