{"id":15078,"library":"babel-preset-typescript-vue3","title":"Babel Preset for TypeScript Vue 3 SFCs","description":"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.","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/Coldsewoo/babel-preset-typescript-vue3","tags":["javascript","babel","preset","typescript","vue","vue3"],"install":[{"cmd":"npm install babel-preset-typescript-vue3","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-typescript-vue3","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-typescript-vue3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for all Babel presets.","package":"@babel/core","optional":false}],"imports":[{"note":"The preset is referenced by its string name within your Babel configuration file (e.g., `babel.config.js` or `.babelrc`).","symbol":"babel-preset-typescript-vue3","correct":"presets: ['babel-preset-typescript-vue3']"},{"note":"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`.","symbol":"Preset Options","correct":"presets: [['babel-preset-typescript-vue3', { /* options */ }]]"},{"note":"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.","wrong":"module.exports = { presets: [...] };","symbol":"Babel Config (ESM)","correct":"export default { presets: [...] };"}],"quickstart":{"code":"module.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.vue$/,\n        loader: \"vue-loader\"\n      },\n      {\n        test: /\\.(j|t)sx?$/,\n        exclude: /node_modules/,\n        use: {\n          loader: \"babel-loader\",\n          options: {\n            presets: [\n              \"@babel/preset-env\",\n              \"babel-preset-typescript-vue3\",\n              \"@babel/preset-typescript\"\n            ]\n          }\n        }\n      }\n    ]\n  }\n};\n","lang":"javascript","description":"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`."},"warnings":[{"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.","message":"Without `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"The 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.","severity":"deprecated","affected_versions":">=2.0.0"},{"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.","message":"Ensure 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"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.","cause":"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.","error":"SyntaxError: Unexpected token ':' (or similar for TypeScript syntax errors)"},{"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.","cause":"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.","error":"Error: You gave us a parser plugin that doesn't exist yet..."}],"ecosystem":"npm"}