Description for emit events in Vue 3

[Mokkapps]

I'm using Storybook with Vue 3 and I want to have a description for my emit events inside Storybook Docs tab.

Currently it only shows unknown:

Do you have any idea how I could show any description text in there?

The component code:

<template>
  <p>{{ label }}</p>
  <!-- @slot Slot to show content below label -->
  <slot name="sub-label"/>
  <div class="container" :class="variant">
    <button @click="increment()">+</button>
    <p class="value">{{ count }}</p>
    <button @click="decrement()">-</button>
  </div>
  <!-- @slot Default slot to show any content below the counter -->
  <slot/>
</template>

<script lang="ts">
import { ref, watch, PropType } from 'vue';
import {Variant} from "./types";

/**
 * This is my amazing counter component
 *
 * It can increment and decrement!
 */
export default {
  props: {
    /**
     * The initial value for the counter
     */
    initialValue: {
      type: Number,
      default: 0,
    },
    /**
     * Text shown above the counter
     */
    label: {
      type: String,
      default: 'Counter'
    },
    /**
     * If true, the counter can show negative numbers
     */
    allowNegativeValues: {
      type: Boolean,
      default: false
    },
    /**
     * Defines the visual appearance of the counter
     */
    variant: {
      type: String as PropType<Variant>,
      default: Variant.Default
    }
  },
  emits: ['counter-update'],
  setup(props, context) {
    const count = ref(props.initialValue);

    const increment = () => {
      count.value += 1;
    };
    const decrement = () => {
      const newValue = count.value - 1;
      if (newValue < 0 && !props.allowNegativeValues) {
        count.value = 0;
      } else {
        count.value -= 1;
      }
    };

    watch(count, (value) => {
      context.emit('counter-update', value);
    });

    return {
      count,
      increment,
      decrement,
    };
  },
};
</script>
<style scoped>
.container {
  display: flex;
  justify-content: space-between;
  border: 1px solid gray;
  border-radius: 10px;
  padding: 10px 10px;
}

.container.colored {
  background-color: lightgoldenrodyellow;
}

button {
  min-width: 50px;
  font-size: 24px;
}

.value {
  font-weight: bold;
  font-size: 24px;
}
</style>

The story code:

import Counter from './Counter.vue';
import { Variant } from './types';

//👇 This default export determines where your story goes in the story list
export default {
  title: 'Counter',
  component: Counter,
  //👇 Creates specific argTypes with options
  argTypes: {
    variant: {
      options: Variant,
    },
  },
};

//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
  components: { Counter },
  setup() {
    //👇 The args will now be passed down to the template
    return { args };
  },
  template: '<Counter v-bind="args">{{ args.slotContent }}</Counter>',
});

//👇 Each story then reuses that template
export const Default = Template.bind({});
Default.args = {
  label: 'Default'
};

export const Colored = Template.bind({});
Colored.args = {
  label: 'Colored',
  variant: Variant.Colored
};

export const NegativeValues = Template.bind({});
NegativeValues.args = {
  allowNegativeValues: true,
  initialValue: -1
};

export const Slot = Template.bind({});
Slot.args = {
  slotContent: 'SLOT CONTENT'
};

The whole source code is available at: https://github.com/Mokkapps/vue-3-storybook-demo

Thanks in advance!

[shilman]

Is it supported by vue-docgen-api? That's what we use under the hood to extract code comments into descriptions.

If it's supported there and not in Storybook, then it's a bug on our side. If it's not supported there, then you should be able to use this workaround:

export default {
  argTypes: {
    variant: {
      options: Variant,
      description: 'Some description here',
    }
  }
}

[Mokkapps]

@shilman I think it is supported in Vue 2: https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#events

But I use Vue 3 with the new Composition API:

context.emit('counter-update', value);

[rotimidokun]

@Mokkapps were you able to solve this issue with Vue 3 and Storybook? I currently have the same problem. Thanks

[Mokkapps]

Unfortunately not, I did not further investigate that problem

[rotimidokun]

Thanks for the reply

[fifzteen]

Did you try comment on emits ?

emits: [
  /**
   * update count value
   * @param {number} count new count value
   */
  'counter-update'
]