Struggling to work with Storybook 5.2.5 with Vue

[michaelsmedley]

Describe the bug I can't seem to get the add on to work with the latest version of Storybook. Following the install instructions, I can get the Info panel to show, however it is constantly blank.

To Reproduce Steps to reproduce the behavior:

1. yarn add -D storybook-addon-vue-info, then import in .storybook/addons.js
2. Add to .storybook/config.js

   import { withInfo } from 'storybook-addon-vue-info'
   addDecorator(withInfo);

3. Update .storybook/webpack.config.js

config.module.rules.push({
    test: /\.vue$/,
    loader: 'storybook-addon-vue-info/loader',
    enforce: 'post'
  })

4. Add an info object to a story

   export const Button = () => ({
   components: { BaseButton },
   props: {
   cssClass: {
     default: text("CSS classes", "")
   },
   disabled: {
     default: boolean("Disabled", false)
   },
   text: {
     default: text("Button text", "Click Me")
   },
   type: {
     default: select(
       "Button Type",
       { Button: "button", Submit: "submit", Reset: "reset" },
       "button"
     )
   }
   },
   info: {},
   template:
   '<base-button :class="cssClass" :type="type" :disabled="disabled">{{ text }}</base-button>'
   });

Expected behavior I expect to see some info within the Info(Vue) panel, however nothing is showing

Versions

• storybook-addon-vue-info: ^1.3.2
• @storybook/vue: ^5.2.5

Additional context I have also tried adding comments etc. to my base components, as per the Vue Docgen API guidelines, however this still does not resolve my issue.

[pocka]

@michaelsmedley I assume you are using CSF (Component Story Format), right? In that case, you need to place the story parameters inside story property or module-level config.

[michaelsmedley]

Hi @pocka

Thanks for the response, much appreciated.

I will give that a try, but I'm pretty certain you have pointed me in the right direction, so I'm going to close this as its user error on my part!

Thanks again