Addon docs: Example configuration with Vue using SFC and TypeScript

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;
};

[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]

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