From fe4878fce30c3935dd1c6e482dd8029aa6988d75 Mon Sep 17 00:00:00 2001
From: dansalias <danyoungnz@gmail.com>
Date: Mon, 16 Nov 2020 18:26:34 +0100
Subject: [PATCH] Add TypeScript + Webpack Configuration Tip

Resolving `.vue` component imports in `<script lang="ts">` blocks requires additional undocumented Webpack configuration.

Credit: https://lmiller1990.github.io/electic/posts/20200406_webpack_for_vue_3.html
---
 src/guide/typescript-support.md | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/guide/typescript-support.md b/src/guide/typescript-support.md
index 9749e95584..2ea5e3c3ec 100644
--- a/src/guide/typescript-support.md
+++ b/src/guide/typescript-support.md
@@ -26,6 +26,31 @@ Note that you have to include `strict: true` (or at least `noImplicitThis: true`
 
 See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.
 
+## Webpack Configuration
+
+If you are using a custom Webpack configuration `ts-loader` needs to be configured to parse `<script lang="ts">` blocks in `.vue` files:
+
+```js{10}
+// webpack.config.js
+module.exports = {
+  ...
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        loader: 'ts-loader',
+        options: {
+          appendTsSuffixTo: [/\.vue$/],
+        },
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+      }
+      ...
+```
+
 ## Development Tooling
 
 ### Project Creation