babel-preset-typescript-vue3

TypeScript preset for Babel 7.x supporting Vue.js 3 components written in TS. A drop-in replacement for @babel/preset-typescript.

Why?

This preset was created to support TypeScript transpilation using Babel (not Microsoft TypeScript), also for Typescript Support for Vue.js 3, without enforced TS-to-JS transpilation for all files (which can be achieved by adding @babel/plugin-transform-typescript to your Babel config).

Due to architectural limitations of vue-loader the original @babel/preset-typescript preset was always assuming that the <script> section of Vue SFC was written in JavaScript. This wasn't an issue when webpack was using different loaders for .js and .ts files. Since Babel unifies that, vue-loader is always passing this file to babel-loader with an original filename (and a resourceQuery which is not accessible from the transpiling preset). Since preset-typescript was transpiling files with .ts and .tsx extensions, not .vue, SFCs were ignored and reported errors during ES6 to ES5 transpilation.

Most likely in the future, this won't be no longer needed if vue-loader will consider also Babel transpilation. As for this is the only friendly way to resolve the issue.

How?

This preset checks whether the .vue file (SFC) has a lang="ts" attribute set for the <script> tag. If so, @babel/plugin-transform-typescript is applied explicitly to the SFC file.

Options

All the options match the original @babel/preset-typescript preset options.

You can read more about configuring preset options here

Original notes and issues

See @babel/preset-typescript for more information or the issues associated with the original preset package.

Install

Using npm:

1npm install --save-dev babel-preset-typescript-vue3

or using yarn:

1yarn add babel-preset-typescript-vue3 --dev

Additional Notes

This package is originated from babel-preset-typescript-vue by pawelgabryelewicz and revised to meet the Vue.js 3 requirements using @vue/compiler-sfc, and following tests.

Example Usage

Webpack

1module: {
2  rules: [
3    {
4      test: /\.vue$/,
5      loader: "vue-loader",
6    },
7    {
8      test: /\.(j|t)sx?$/,
9      exclude: /node_modules/,
10      use: {
11        loader: "babel-loader",
12        options: {
13          presets: [
14            "@babel/preset-env",
15            "babel-preset-typescript-vue3",
16            "@babel/preset-typescript",
17          ],
18        },
19      },
20    },
21  ]
22}

Babel Configuration

1// babel.config.js
2export default {
3  presets: [
4    "@babel/preset-env",
5    "babel-preset-typescript-vue3"
6  ]
7};

Requirements

• Node.js >= 8.0.0
• Babel >= 7.0.0
• Vue.js >= 3.0.0

Peer Dependencies

1{
2  "@babel/core": "^7.0.0-0"
3}

Change Log

v2.1.1 - Major dependency updates

• Updated to Babel 7.27.x
• Updated @vue/compiler-sfc to 3.5.13
• Updated Vue.js to 3.5.13
• Migrated to @rollup/plugin-* packages
• Added ES module support
• Security fixes for all dependabot alerts
• Add .tsx support
• Added more test suites

v2.0.14 - Update Dependencies

v2.0.11 - Supports <script setup> (Link)

v2.0.8 - Update Dependencies (vue@3.0.3 -> vue@3.0.5)

License

MIT