Example for preset-typescript with vue-cli and potential fix

examples/ts-vue-cli/.storybook/main.js

@@ -0,0 +1,13 @@
+module.exports = {
+  stories: ['../src/**/*.stories.(ts|mdx)'],
+  addons: [
+    {
+      name: '@storybook/preset-typescript',
+      options: {
+        forkTsCheckerWebpackPluginOptions: {
+          colors: false, // disables built-in colors in logger messages
+        },
+      },
+    },
+  ],
+};

examples/ts-vue-cli/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['@vue/cli-plugin-babel/preset'],
+};

examples/ts-vue-cli/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "example-ts-vue-cli",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "exit 0;",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "serve": "vue-cli-service serve"
+  },
+  "dependencies": {
+    "@vue/cli-plugin-babel": "^4.2.3",
+    "@vue/cli-plugin-typescript": "~4.2.0",
+    "@vue/cli-service": "~4.2.0",
+    "vue-class-component": "^7.2.2",
+    "vue-property-decorator": "^8.3.0",
+    "@babel/core": "^7.8.7",
+    "@storybook/addon-docs": "^5.3.14",
+    "@storybook/preset-typescript": "*",
+    "@storybook/vue": "^5.3.14",
+    "babel-loader": "^8.0.6",
+    "babel-preset-vue": "^2.0.2",
+    "typescript": "^3.8.3",
+    "vue": "^2.6.11",
+    "vue-loader": "^15.9.0",
+    "vue-template-compiler": "^2.6.11"
+  }
+}

examples/ts-vue-cli/src/App.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="app">
+    <Button>Hello</Button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import Button from './components/Button/Button.vue';
+@Component({
+  components: {
+    Button,
+  },
+})
+export default class App extends Vue {}
+</script>

examples/ts-vue-cli/src/components/Button/Button.stories.ts

@@ -0,0 +1,9 @@
+import Button from './Button.vue';
+
+// eslint-disable-next-line import/no-default-export
+export default { title: 'Button', component: Button };
+
+export const Default = (): object => ({
+  components: { Button },
+  template: '<Button>Example</Button>',
+});

examples/ts-vue-cli/src/components/Button/Button.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="button-class">{{label}}</div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class ButtonClass extends Vue {
+  @Prop({ type: String, default: 'Label'}) private label!: string;
+}
+</script>
+
+<style>
+.button-class {
+  display: inline-block;
+  border: 1px solid #aaa;
+  background-color: #fff;
+  border-radius: 3px;
+}
+</style>

examples/ts-vue-cli/src/main.ts

@@ -0,0 +1,9 @@
+import Vue from 'vue';
+import App from './App.vue';
+
+Vue.config.productionTip = false;
+
+new Vue({
+  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+  render: h => h(App),
+}).$mount('#app');

examples/ts-vue-cli/src/shims-vue.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import Vue from 'vue';
+
+  // eslint-disable-next-line import/no-default-export
+  export default Vue;
+}

examples/ts-vue-cli/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "strict": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true
+  },
+  "include": ["src", ".storybook/*"]
+}

packages/preset-typescript/package.json

@@ -28,7 +28,8 @@
     "@storybook/node-logger": "^5.3.17",
     "@types/babel__core": "^7.1.6",
     "babel-preset-typescript-vue": "^1.0.3",
-    "fork-ts-checker-webpack-plugin": "^4.1.0"
+    "fork-ts-checker-webpack-plugin": "^4.1.0",
+    "ts-loader": "^6.2.2"
   },
   "devDependencies": {
     "typescript": "^3.8.3"

packages/preset-typescript/src/index.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack'; // eslint-disable-line import/no-extraneous-dependencies
+import { Configuration, Module, RuleSetRule } from 'webpack'; // eslint-disable-line import/no-extraneous-dependencies
 import { Options } from './options';
 import { processConfig } from './helpers/processConfig';
 import { isCompatible } from './helpers/isCompatible';
@@ -63,7 +63,36 @@ export const webpack = (
         vue: options.forkTsCheckerWebpackPluginOptions?.vue ?? true,
       },
     };
-    return processConfig(webpackConfig, updatedOptions);
+
+    const { tsLoaderOptions = { transpileOnly: true } } = options;
+    tsLoaderOptions.appendTsSuffixTo = [
+      ...(tsLoaderOptions.appendTsSuffixTo || []),
+      /\.vue$/,
+    ];
+
+    const tsLoader: RuleSetRule = {
+      test: /\.tsx?$/,
+      use: [
+        {
+          loader: require.resolve('ts-loader'),
+          options: tsLoaderOptions,
+        },
+      ],
+    };
+
+    if (options.include) {
+      tsLoader.include = options.include;
+    }
+
+    const module: Module = webpackConfig.module || { rules: [] };
+    const updatedWebpack = {
+      ...webpackConfig,
+      module: {
+        ...module,
+        rules: [...module.rules, tsLoader],
+      },
+    };
+    return processConfig(updatedWebpack, updatedOptions);
   }
 
   return processConfig(webpackConfig, options);

packages/preset-typescript/src/options.ts

@@ -28,4 +28,7 @@ export interface Options {
     presets: PluginItem[] | null;
   };
   framework: 'angular' | 'react' | 'vue'; // NOTE: Non-exhaustive list.
+
+  // TODO: Proper typing
+  tsLoaderOptions: any;
 }