Registry / web-framework / babel-preset-typescript-vue3

babel-preset-typescript-vue3

library2.1.1jsnpmunverified

This Babel preset, `babel-preset-typescript-vue3`, addresses a specific limitation in `vue-loader` when transpiling Vue 3 Single File Components (SFCs) with `<script lang='ts'>` using Babel 7.x. Unlike the standard `@babel/preset-typescript`, which historically ignored `.vue` files, this preset explicitly applies TypeScript transformation to SFCs where `lang='ts'` is detected. It serves as a drop-in replacement or addition to `@babel/preset-typescript` specifically for Vue 3 projects. The current stable version is 2.1.1, with recent updates including Babel 7.27.x, Vue.js 3.5.13, ES module support, and `<script setup>` support. It differentiates itself by resolving the `vue-loader` and Babel integration challenge for TypeScript SFCs, a problem the official preset did not originally handle due to filename assumptions. While its necessity might diminish with future `vue-loader` updates, it remains a crucial solution for this specific use case.

web-framework

npm install babel-preset-typescript-vue3

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-TYPES

babel-preset-typescript-vue3

web-frameworkjavascriptv2.1.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

babel-preset-typescript-vue3

✓ presets: ['babel-preset-typescript-vue3']

The preset is referenced by its string name within your Babel configuration file (e.g., `babel.config.js` or `.babelrc`).

Preset Options

✓ presets: [['babel-preset-typescript-vue3', { /* options */ }]]

To pass options to the preset, wrap the preset name and an options object in an array. All options for this preset match those of `@babel/preset-typescript`.

Babel Config (ESM)

✓ export default { presets: [...] };

✗ module.exports = { presets: [...] };

Modern Babel configurations often leverage ESM syntax for `babel.config.js`. While `module.exports` still works for CommonJS projects, `export default` is the preferred style for new setups.

Demonstrates how to integrate `babel-preset-typescript-vue3` within a Webpack configuration to correctly transpile Vue 3 SFCs with TypeScript, alongside `@babel/preset-env` and `@babel/preset-typescript`.

module.exports = { module: { rules: [ { test: /\.vue$/, loader: "vue-loader" }, { test: /\.(j|t)sx?$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", "babel-preset-typescript-vue3", "@babel/preset-typescript" ] } } } ] } };

Debug

Known issues

gotchaWithout `babel-preset-typescript-vue3`, Vue 3 Single File Components (SFCs) using `<script lang='ts'>` may not be correctly processed by Babel, leading to syntax errors or unexpected behavior. The standard `@babel/preset-typescript` historically ignores `.vue` files due to filename assumptions, causing transpilation failures for TypeScript within SFCs.

fix

Ensure `'babel-preset-typescript-vue3'` is included in your Babel `presets` array in `babel.config.js` or `.babelrc`. It should typically be placed before `@babel/preset-typescript` to ensure `.vue` files are handled correctly. Also, verify your `babel-loader` rule in Webpack covers `.vue` files.

affects: >=1.0.0

deprecatedThe package documentation suggests that this preset might become unnecessary in the future if `vue-loader` natively integrates Babel transpilation for TypeScript SFCs. Developers should be aware of this potential for future deprecation.

fix

Regularly monitor official `vue-loader` and Vue.js documentation and release notes for updates regarding native TypeScript SFC transpilation with Babel. Be prepared to remove or replace this preset if its functionality is absorbed into core tooling.

affects: >=2.0.0

gotchaEnsure all Babel-related dependencies, especially `@babel/core` and `@vue/compiler-sfc`, are compatible with the specific version of `babel-preset-typescript-vue3` you are using. Incompatibilities can lead to cryptic errors or unexpected transpilation issues, particularly after major dependency updates.

fix

Consult the `package.json` for this preset's peer dependencies and review its changelog for specific version requirements of Babel and Vue.js. Use `npm outdated` or `yarn upgrade` to manage your project's dependencies and keep them aligned.

affects: >=2.0.0

Errors

Common errors & fixes

SyntaxError: Unexpected token ':' (or similar for TypeScript syntax errors)

Vue SFC `<script lang='ts'>` content is being parsed by a JavaScript transpiler (e.g., `@babel/preset-env`) without prior TypeScript stripping, as `babel-preset-typescript-vue3` is missing or misconfigured.

fix

Confirm `babel-preset-typescript-vue3` is listed in your Babel `presets` array within your `babel.config.js` or `.babelrc`. Ensure it is placed before `@babel/preset-env` and `@babel/preset-typescript` to prioritize TypeScript transformation for Vue SFCs. Also verify `babel-loader` is correctly applied to `.vue` files.

Error: You gave us a parser plugin that doesn't exist yet...

This error typically indicates an outdated `@babel/core` or related `@babel/*` package, or an issue where the `babel-preset-typescript-vue3`'s internal plugins are not being loaded correctly due to an incompatible Babel environment.

fix

Update your `@babel/core` to meet the `babel-preset-typescript-vue3`'s peer dependency requirements (e.g., `^7.0.0-0`). Run `npm install` or `yarn install` to ensure all Babel dependencies are correctly resolved. Double-check your Babel configuration for any conflicting or old plugin declarations.

Upgrade

Version history

2.1.1latest on npm

Audit

Dependencies

@babel/corerequiredRequired peer dependency for all Babel presets.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Coldsewoo/babel-preset-typescript-vue3 ↗

packagehttps://www.npmjs.com/package/babel-preset-typescript-vue3 ↗