Storybook: vue typescript

[davidm-public]

Question: does anyone know the magic incantations required to get storybook working with Vue and Typescript?

[igor-dv]

It does work for angular in our monorepo. And AFAIK, some people do use storybook with ts in react apps. So nothing magical

1. Use full controll mode - https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode
2. Add your favorite ts loader
3. ...
4. Profit 💸

Am I missing something?

[davidm-public]

SOLVED:

These work, for Vue + Typescript + Webpack:

1) ./.storybook/config.js:

import { configure } from '@storybook/vue'

// automatically import all files ending in *.stories.js
const req = require.context('../src/stories', true, /.stories.ts$/);
function loadStories() {
  req.keys().forEach((filename) => req(filename));
}

configure(loadStories, module)

2) ./.storybook/webpack.conf.js:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');

module.exports = (storybookBaseConfig, configType) => {
  const config = genDefaultConfig(storybookBaseConfig, configType);

  config.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')

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

  config.plugins.push(new ForkTsCheckerWebpackPlugin())

  return config;
};

[alterx]

It looks like this one is solved.

[almeynman]

I have written a blog post on configuring storybook with vue and typescript here. I think it's a much better approach. Will appreciate feedback

[wfsovereign]

If above resolution can‘t satisfy you, you can try my solution.

webpack.config.js

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');


module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.resolve.extensions.push('.ts', '.tsx', '.vue', '.css', '.less', '.scss', '.sass', '.html')

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

  // If you use scss,
  //  defaultConfig.module.rules.push({ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'] })

  defaultConfig.module.rules.push({ test: /\.less$/, loaders: [ 'style-loader', 'css-loader', 'less-loader' ] })

  defaultConfig.plugins.push(new ForkTsCheckerWebpackPlugin())

  return defaultConfig;
};

[Al-un]

Many thanks @wfsovereign . With the full control mode, the incantation becomes:

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = ({ config }) => {
  config.resolve.extensions.push(
    ".ts",
    ".tsx",
    ".vue",
    ".css",
    ".less",
    ".scss",
    ".sass",
    ".html"
  );

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

  config.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
  });

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

  return config;
};

[eightHundreds]

Many thanks @wfsovereign . With the full control mode, the incantation becomes:

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

module.exports = ({ config }) => {
  config.resolve.extensions.push(
    ".ts",
    ".tsx",
    ".vue",
    ".css",
    ".less",
    ".scss",
    ".sass",
    ".html"
  );

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

  config.module.rules.push({
    test: /\.scss$/,
    loaders: ["style-loader", "css-loader", "sass-loader"]
  });

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

  return config;
};

{
-    test: /\.ts$/,
+    test: /\.tsx?$/,
    exclude: /node_modules/,
    use: [
      {
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/],
          transpileOnly: true
        }
      }
    ]
}

[vertic4l]

And how do you solve the wrong typings issue?

[FlorianWendelborn]

Here’s the version that worked for me with the recent versions (5.3) of storybook:

.storybook/main.js:

const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')

module.exports = {
    stories: [
        '../src/components/**/stories.ts',
        '../src/components/**/stories.tsx',
    ],
    addons: ['@storybook/addon-actions', '@storybook/addon-links'],
    webpackFinal: async (config, { configType }) => {
        config.resolve.extensions.push(
            '.ts',
            '.tsx',
            '.vue',
            '.css',
            '.less',
            '.scss',
            '.sass',
            '.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
    },
}