Storybook

Button.stories.js

              import MyButton from "./MyButton.vue";
              import { action } from "@storybook/addon-actions";

              export default {
                component: MyButton,
                title: "Button"
              };

              export const withJSX = () => 
                <MyButton onClick={action("clicked")}>Click Me</MyButton>
            

Storybook

Cool !

• Very Popular
• Isolation
• Slick Design
• Knobs & other Addons
• Backed by Chromatic QA

Not so cool

• JSX is not HTML
• ReactJs
• Vue Dev Tools needs detach

Vue Styleguidist

MyButton.vue

              <template>
                <button :style="`background-color:${color}`" >
    <!-- @slot text of the button -->
    <slot />
                </button>
              </template>

              <script>
              export default {
                props: {
    /**
                   * Set the background color of the button
                   * @values blue, red, green
                   */
    color: {
                    type: String,
                    default: "blue"
                  }
                }
              }
              </script>
            

Vue Styleguidist