tuchk4 / storybook-readme

The readme lacks an example on how to use <docs> section in Vue SFC files.
So I've found it in sources:

storybook-readme/packages/example-vue/stories/index.js

Line 44 in e279306

.addDecorator(withDocs(MyButton.__docs))

And even in that case it doesn't work with the following code:

  // eslint-disable-next-line no-underscore-dangle
  .addDecorator(withDocs(MyComponent.__docs))

I get this error in preview area:

webpack config contains the blockType=docs rule

Any ideas what may be the cause?

Here is example of vue-storybook https://github.com/tuchk4/storybook-readme/tree/master/packages/example-vue with <docs> but I am not sure if it works with latest versions.

Will check it right now

This example https://github.com/tuchk4/storybook-readme/tree/master/packages/example-vue works correctly.

You may got error because MyComponent.__docs is undefined. Seems something with webpack config.

Could you please publish repo with reproduction?

Will do for sure once return to our storybook feature within a month. Thanks

@pribilinskiy use MyComponent.options.__docs

I'm using vue-property-decorator, vue-loader 15.6

@tuchk4 Having the same issue now :(

When we run storybook in the watch/serve mode it works fine e.g.

storiesOf('Testing', module)
.addDecorator(withDocs(MyButton.__docs))

with a webpack.config.js of

module.exports = storybookBaseConfig => {
    storybookBaseConfig.module.rules.push({
        resourceQuery: /blockType=docs/,
        use: [
            'storybook-readme/env/vue/docs-loader',
            'html-loader',
            'markdown-loader',
        ],
    })

    return storybookBaseConfig
}

--

Everything is well and good!

However.......................

When you run the build process the MyButton.__docs is undefined causing the error

storybook-readme: wrong arguments

@OwenMelbz MyButton.options.__docs Should be useful

MyButton.options is also always empty

FYI @tuchk4 @yoyoys @OwenMelbz
My solution, just extend options definition of component with typescript:
vuejs/vue-class-component#50 (comment)

@b0g3r and if your not using typescript?

Do you have reproduced example? Do you use vue-property-decorator?

Yes, we use vue-property-decorator in every component

Going to make new release #118
Hope will be possible to fix.

@OwenMelbz Errors only during build? There are no errors when run storybook?

Nope, when storybook is running in server mode it’s auto-reloading and everything is working as expected.

Only when we run build does it throw the error

Hope it is fixed in 5.0.0
Made test for dev and pro builds.

module.exports = storybookBaseConfig => {
  storybookBaseConfig.module.rules.push({
    resourceQuery: /blockType=docs/,
    use: ['storybook-readme/vue/docs-loader', 'html-loader', 'markdown-loader'],
  });
};

Define <docs> tag inside vue module:

<docs>
Docs inside vue module 
</docs>

<template>
  <button class="button">
    <slot></slot>
  </button>
</template>

Use it to defone docs at story:

import MyButton from '../components/MyButton/MyButton.vue';

storiesOf('Vue <docs>', module).addParameters({
  readme: {
    content: MyButton.__docs,
  },
});

Broken <docs> in Vue SFC