Storybook-readme: Vue support

[andreasvirkus]

Just wondering if there's any near-future plans to support Vue?

Thanks!

[tuchk4]

@andreasvirkus Yes, going to test and release addon with vue support at the end of next week

[andreasvirkus]

Would you also consider supporting from custom blocks (like <documentation>)?
vue-loader has the extraction support already built in.

https://vue-loader.vuejs.org/en/configurations/custom-blocks.html

[ndelangen]

@andreasvirkus Is this something you could help @tuchk4 with?

[andreasvirkus]

My keyboard is yours to command, @tuchk4!

[tuchk4]

@andreasvirkus Any changes are up to you.

I will be happy if you provide PR with example/vue and then we will decide what problems we have and what features we want.

[andreasvirkus]

@tuchk4 Should I first wait for the Vue support to be released? Or can I base my branch off of a feature branch where the Vue support exists? Couldn't find a relevant branch under this repo.

[andreasvirkus]

@tuchk4 ping. Any news on Vue support? Also would like to go over the code with you quickly if you'd be willing to guide me to making the vue-loader and custom <docs> tag work.

[tuchk4]

Sorry for late response. I am going to implement vue support this week.
I push new branch vue-support

But I have few issues (because I have not experience with vue):

1. Failed to mount component

@andreasvirkus I will be happy if you will help me with it.
Then we should decide how to include <docs>.

vue.esm.js:571 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <MyButton> at example-vue/components/MyButton/MyButton.vue
       <Anonymous>
         <Root>

2. Storybook bin files

@ndelangen This question to you :)
Packages @storybook/react and @storybook/vue have binaries with same names.

• https://github.com/storybooks/storybook/blob/master/app/vue/package.json#L13
• https://github.com/storybooks/storybook/blob/master/app/react/package.json#L13

Is it possible to install both of them? I need to run react and vue storybooks for examples and testing readme addon.

[tuchk4]

Update:

1. Failed to mount component
ref: https://github.com/vuejs/vue-loader/issues/844#issuecomment-308976557

This error was because there were two rules for vue-loader at webpack config (one rule - default storybook webaock config, second rule - at my .storybook/webpack.config.js)

\

<template>
  <div><slot></slot></div>
</template>

<docs>
  ## This is docs inside component
</docs>

<script>
  export default {};
</script>

It is easy to implement with runtime-available-docs:

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      docs: docsLoader,
    },
  },
}

To add docsLoader - I should use Full Control Mode for Storybook webpack configuration and change vue loader options (It is not possible to use Extend Mode becase of vue-loader rule duplication).
This is not cool because developers should add this to storybook weback config at every vue storybook with readme addon.

module.exports = (storybookBaseConfig, configType) => {
  storybookBaseConfig.module.rules = storybookBaseConfig.module.rules.map(rule => {
    if (rule.loader.indexOf('vue-loader') !== -1) {
      return {
        ...rule,
        options : {
          ...rule.options
          loaders: {
            docs: docsLoader,
          },
        }
      }
    }

    return rule;
  });

  return storybookBaseConfig;
};

@ndelangen any ideas how to configure it in most friendly way?

---

To add component's docs via withDocs or withReadme:

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

storiesOf('withDocs', module)
  .addDecorator(withDocs(MyButton.__docs))
  .add('Button', () => {
    return {
      components: { MyButton },
      template: `<my-button>My Button</my-button>`,
    };
  });

[tuchk4]

Update

I have solutions ;)

Will commit in few hours

[tuchk4]

Update

At master is supports both react and vue.

yarn storybook-react
yarn storybook-vue

I will be happy if somebody review code related to vue part (it was my first experience with vue 🙃):

• packages/example-vue
• packages/storybook-readme/src/env/vue

vue support comes with huge update:

• now use lerna (private packages for react-example, vue-example, and public package for storybook-readme)
• use webpack loaders to transform markdown to html. Also this is related to https://github.com/storybooks/storybook/pull/2299
• refactor old code

The only one problem (except bugs) - webpack configs:

• packages/example-vue/.storybook/webpack.config.js
• packages/example-react/.storybook/webpack.config.js

Looking for help to simplify them.

[ndelangen]

@tuchk4 Some inspiration:
https://storybooks.slack.com/archives/C5TE0A4AW/p1510616980000298

Maybe you should ask in the Vue channel in slack

[chinchang]

@tuchk4 I tried the vue support, but instead of seeing the docs in html, I see the docs as html:

(Using your examples as base config)

What might be missing?

[tuchk4]

@chinchang did you try version from master? (because master is not released yet)
with this config https://github.com/tuchk4/storybook-readme/tree/master/packages/example-vue/.storybook?

[chinchang]

Yes, I used master. Which branch should I try?

[tuchk4]

Vue support is released with 3.2.0

here is how configure webpack https://github.com/tuchk4/storybook-readme#webpack-configuration-for-vue-storybook

Close this issue. Please reopen or create new if any issues.