Skip to content

Commit 80ddbb7

Browse files
authored
Add TypeScript + Webpack Configuration Tip (#696)
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
1 parent afd1dd2 commit 80ddbb7

File tree

1 file changed

+25
-0
lines changed

1 file changed

+25
-0
lines changed

src/guide/typescript-support.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,31 @@ Note that you have to include `strict: true` (or at least `noImplicitThis: true`
2626

2727
See [TypeScript compiler options docs](https://www.typescriptlang.org/docs/handbook/compiler-options.html) for more details.
2828

29+
## Webpack Configuration
30+
31+
If you are using a custom Webpack configuration `ts-loader` needs to be configured to parse `<script lang="ts">` blocks in `.vue` files:
32+
33+
```js{10}
34+
// webpack.config.js
35+
module.exports = {
36+
...
37+
module: {
38+
rules: [
39+
{
40+
test: /\.tsx?$/,
41+
loader: 'ts-loader',
42+
options: {
43+
appendTsSuffixTo: [/\.vue$/],
44+
},
45+
exclude: /node_modules/,
46+
},
47+
{
48+
test: /\.vue$/,
49+
loader: 'vue-loader',
50+
}
51+
...
52+
```
53+
2954
## Development Tooling
3055

3156
### Project Creation

0 commit comments

Comments
 (0)