Storybook: Storybook docs description for primary slot

[AlekseyPn]

Hi, i need help.
How i can write description for primary slot with vue story, and how i can describe props or events, i have not found how i can do it.
And i have not found describes for parameters.docs api. I lost many hours in tried find describes((

[shilman]

Use JSDoc, like this: https://github.com/storybookjs/storybook/blob/next/examples/vue-kitchen-sink/src/stories/components/InfoButton.vue

[AlekseyPn]

@shilman Thanks for reply, I talk about that example, on the third line "description" rendered by JSDoc, from this example https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/docspage.md#description
But when i use it in my stories with vue, it doesn't applied

[shilman]

Does this help? https://github.com/storybookjs/storybook/commit/3bcaaeb769ef21234837cc755a27c056092d1f00

[HoraceKeung]

It works and would like to share the following info from my experience in case of any misunderstanding:

1. The comment for the description should be inside the Vue single file component, not in the story
2. The comment must be right above this line of code: export default {
   i.e.

<script>
import Another from '~/components/Another'
/**
 * Component description
 */
export default {...}
</script>

The above will work and the below will not

<script>
/**
 * Component description
 */
import Another from '~/components/Another'
export default {...}
</script>

1. It won't apply if the story is written with MDX (and it is expected I believe)

[shilman]

@HoraceKeung thanks! for MDX, you should be able to do:

import { Description } from '@storybook/addon-docs/blocks';
import { Component } from './component';

<Description of={Component} />

[AlekseyPn]

@HoraceKeung Thanks!!!

[HoraceKeung]

@shilman Thank you! Would like to mention that in Vue, it is import Component from './Component';, also I think it should be import { Description } from '@storybook/addon-docs/blocks'; Speaking of docs blocks, I couldn't find documentation regarding all the available docs blocks, but I guess it is coming soon on this page? https://storybook.js.org/docs/formats/mdx-syntax/

[shilman]

@HoraceKeung thanks, fixed. yes docs coming soon 🙈

[ecarrera]

@annacv you can describe slots with @slot tag.

<template>
  <div>
    <!-- @slot Use this slot header -->
    <slot name="header"></slot>

    <!--
      @slot Modal footer
      @binding item an item passed to the footer
        -->
    <slot name="footer" :item="item" />
  </div>
</template>

Here is the reference: https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#slots