/* eslint-disable no-param-reassign */
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import type { Configuration } from 'webpack';

import type { Options, TypescriptConfig } from '@storybook/core-common';

export async function webpack(config: Configuration, { presets }: Options) {
  const typescriptOptions = await presets.apply<TypescriptConfig>('typescript', {} as any);

  config.plugins.push(new VueLoaderPlugin());
  config.module.rules.push({
    test: /\.vue$/,
    loader: require.resolve('vue-loader'),
    options: {},
  });
  config.module.rules.push({
    test: /\.tsx?$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
        options: {
          transpileOnly: !typescriptOptions.check,
          appendTsSuffixTo: [/\.vue$/],
        },
      },
    ],
  });

  config.resolve.extensions.push('.vue');
  config.resolve.alias = { ...config.resolve.alias, vue$: require.resolve('vue/dist/vue.esm.js') };

  return config;
}

/* eslint-disable no-param-reassign */
import VueLoaderPlugin from 'vue-loader/lib/plugin';
import type { Configuration } from 'webpack';

export function webpack(config: Configuration) {
  config.plugins.push(new VueLoaderPlugin());
  config.module.rules.push({
    test: /\.vue$/,
    loader: require.resolve('vue-loader'),
    options: {},
  });
  config.module.rules.push({
    test: /\.tsx?$/,
    use: [
      {
        loader: require.resolve('ts-loader'),
        options: {
          transpileOnly: true,
          appendTsSuffixTo: [/\.vue$/],
        },
      },
    ],
  });

  config.resolve.extensions.push('.vue');
  config.resolve.alias = { ...config.resolve.alias, vue$: require.resolve('vue/dist/vue.esm.js') };

  return config;
}

--- 
+++ 
@@ -2,7 +2,11 @@
 import VueLoaderPlugin from 'vue-loader/lib/plugin';
 import type { Configuration } from 'webpack';
 
-export function webpack(config: Configuration) {
+import type { Options, TypescriptConfig } from '@storybook/core-common';
+
+export async function webpack(config: Configuration, { presets }: Options) {
+  const typescriptOptions = await presets.apply<TypescriptConfig>('typescript', {} as any);
+
   config.plugins.push(new VueLoaderPlugin());
   config.module.rules.push({
     test: /\.vue$/,
@@ -15,7 +19,7 @@
       {
         loader: require.resolve('ts-loader'),
         options: {
-          transpileOnly: true,
+          transpileOnly: !typescriptOptions.check,
           appendTsSuffixTo: [/\.vue$/],
         },
       },
fix(vue): Check types when `typescript.check` is true

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

TypeScript checks in `@storybook/vue` has not been enabled. This commit
enables users to turn on type checking process powered by ts-loader.

From performance perspective, fork-ts-checker-webpack-plugin is better
especially for large projects. However, it needs one of 1) modifying
type-checker options in each builders or 2) adding
fork-ts-checker-webpack-plugin as a dependency of `@storybook/vue`.
I think both comes with huge downsides and it should be done in user
side by setting `typescript.check: false` and configuring the plugin
manually.
