Storybook: Addon docs: Example configuration with Vue using SFC and TypeScript

[ux-engineer]

I have working configuration with Vue in TypeScript and SB5.2. I'd like use the new docs addon, but after half a day of trial and error with its configuration, it seems Vue isn't really supported yet.

Vue development is most often done in Single File Components, using Vue's default imports alias '@' to 'src' folder, and with TypeScript now that Vue version 3 on approach...

First of all, I could not get the SCSS preset to work as vue-style-loader is not used there. Also sass-loader needs to configured with importing SCSS variables for SFC's style blocks.

Request: Working example of SB Vue configured with SB 5.2 and docs addon, using Vue's Single File Components written in TypeScript, and with SCSS variables preloading.

Also as a SB Vue user I should not be needing React as a dep, but I understand you have been on a schedule to get the docs addon out for React first.

Here is my working webpack.config.js for *.stories.ts files that are using Vue components:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const path = require('path')
const rootPath = path.resolve(__dirname, '../src')

// https://github.com/storybookjs/storybook/issues/6467

// https://github.com/storybookjs/storybook/issues/2792
module.exports = ({ config }) => {
  config.resolve.alias['@'] = rootPath;
  config.resolve.alias['~'] = rootPath;

  config.module.rules.push({
    test: /\.scss$/,
      use: [
        'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        data: '@import "@/assets/styles/abstracts/_variables.scss";'
      }
        }
     ]
  });

  config.resolve.extensions.push(
    '.ts',
    '.vue',
    '.css',
    '.scss',
    '.html'
  );

  config.module.rules.push({
    test: /\.ts$/,
    exclude: /node_modules/,
    use: [
      {
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      }
    ]
  });

  config.plugins.push(new ForkTsCheckerWebpackPlugin());

  return config;
};

[shilman]

@Aaron-Pool can you help on this?

[Aaron-Pool]

I'd be glad to try to get some more diverse examples set up for the Vue ecosystem @envision. To help with your immediate need, though, could you maybe create a minimal example of your storybook setup that isn't working and push it to a repo so I could help you debug it?

As for the react dependency, that's unavoidable if you want to use addon-docs, or even storybook in general. And to my knowledge that's always been the case. Storybook is built with react, it's only small, adapter-like packages that make it compatible with other frameworks. But it only needs to be a dependency for your storybook project, of course. The actual library/components your demoing shouldn't need to bundle react.

[ux-engineer]

Thanks for your help @Aaron-Pool - here's a reproduced repository featuring a new Vue app with TypeScript and Bootstrap Vue.

By the commit #5c40600 there is a minimal working configuration with Vue using custom webpack configs: https://github.com/envision/storybook-5.2-vue-minimal-repro

On this newest commit #5c40600 I've added @storybook/preset-scss and @storybook/preset-typescript presets and started configuring MDX stories. However I haven't yet found how to get these two presets working with Vue, and neither custom configs...

So help needed here! Preferably Storybook with Vue in TypeScript should be working with Storybook Docs, and with these official presets provided. Alternatively a working custom configuration solution should be discovered if unable to leverage the presets.

[Aaron-Pool]

@envision thanks for the repro. I'll try to pull it down and try to get it running in the next couple of days👌

[ux-engineer]

There is something to sort out in relation to using JSX with Vue. I noticed that I needed remove shims-jsx.d.ts file that comes with Vue by default. Here is an another discussion related to this: https://github.com/storybookjs/storybook/issues/8096#issuecomment-534000621

[Aaron-Pool]

@envision yes, there are known issues with vue jsx combining with MDX, namely because that puts two competing JSX presets on the same page. The JSX outside of story blocks (within the MDX) needs to be transpiled by babel-react-jsx and the JSX within the story needs to be transpiled by vue/jsx. There is an ongoing discussion on how to address this (though it did, admittedly, die down while the core storybook maintainers were focused on getting 5.2 released), feel free to put in your two cents: https://github.com/storybookjs/storybook/issues/7984#issuecomment-527934891

[ux-engineer]

Hi @Aaron-Pool, how are things going regarding this issue?

[Aaron-Pool]

@envision, right sorry. I totally let this slip through the cracks. I should have a little bit of free time tonight to pull down your repo and get it working. If I don't post some sort of update in this thread tonight, ping me again, just to keep me honest 😉

[Aaron-Pool]

Ok, tinkered with it a bit tonight for about an hour, and yeah, I couldn't get it running. Tried to sort out the repo as is, but there's a whole lot going on there, so I'll try again (hopefully tomorrow night) with a clean start in a brand-new repo. See if that's easier to get running.

[Aaron-Pool]

@envision Your wish is my command (Working Example)

My process:
1) Init a typescript project with Vue-Cli (v4, which was just released)
2) Add Vue Cli Storybook Plugin
3) Disable Vue Jsx in the babel config (Vue Jsx is temporarily incompatible with addon-docs):

// babel.config.js
module.exports = {
  presets: [["@vue/cli-plugin-babel/preset", {
    jsx: false
  }]]
};

[ux-engineer]

Thanks a lot @Aaron-Pool, I will take time this weekend to go through your solution :)

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[ux-engineer]

Forgot to post here earlier but got the setup working with your configurations, thanks a lot again Aaron 👍