{"id":12871,"library":"babel-preset-typescript-vue","title":"Babel Preset for TypeScript with Vue SFC Support","description":"This package, `babel-preset-typescript-vue` (version 1.1.1, last updated in early 2020), provides a Babel 7.x preset specifically designed to enable TypeScript transpilation within Vue.js Single File Components (SFCs). It serves as a specialized drop-in replacement for `@babel/preset-typescript`, addressing an architectural limitation in `vue-loader` that historically prevented the standard TypeScript preset from correctly processing `<script lang=\"ts\">` blocks within `.vue` files. The preset identifies `.vue` files with the `lang=\"ts\"` attribute and explicitly applies `@babel/plugin-transform-typescript`, ensuring that ES6+ TypeScript syntax is correctly transpiled to a compatible JavaScript version. Its primary differentiator is this targeted fix for Vue SFCs, which was a common challenge during the transition to Babel-based TypeScript transpilation in Vue 2 projects. Given its niche role as a workaround, its relevance is tied to older `vue-loader` versions, and it is largely considered stable with no active development or planned releases.","status":"abandoned","version":"1.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/pawelgabryelewicz/babel-preset-typescript-vue","tags":["javascript","babel-preset","typescript","vue"],"install":[{"cmd":"npm install babel-preset-typescript-vue","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-typescript-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-typescript-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for any Babel preset to function within a Babel 7.x environment.","package":"@babel/core","optional":false}],"imports":[{"note":"This package is a Babel preset; its primary 'use' is via its string identifier in a Babel configuration file (e.g., `babel.config.js`). It does not export JavaScript symbols for direct import into application code.","wrong":"import { babelPresetTypescriptVue } from 'babel-preset-typescript-vue'","symbol":"babel-preset-typescript-vue","correct":"module.exports = { presets: ['babel-preset-typescript-vue'] }"},{"note":"Options for Babel presets are passed as the second element of an array tuple within the `presets` array. The options match those of `@babel/preset-typescript`.","wrong":"module.exports = { presets: [{ 'babel-preset-typescript-vue': { isTSX: false } }] }","symbol":"babel-preset-typescript-vue with options","correct":"module.exports = { presets: [['babel-preset-typescript-vue', { isTSX: false, allExtensions: true }]] }"},{"note":"Using `require.resolve` can ensure Babel locates the preset by its absolute path, which is useful in monorepos or complex build setups, but it's still for configuration, not runtime import.","wrong":"const preset = require('babel-preset-typescript-vue');","symbol":"require.resolve()","correct":"module.exports = { presets: [require.resolve('babel-preset-typescript-vue')] }"}],"quickstart":{"code":"{\n  // babel.config.js\n  // This file defines your Babel configuration.\n  module.exports = {\n    // Define the presets Babel should use for transpilation.\n    presets: [\n      // 'babel-preset-typescript-vue' is essential for enabling TypeScript in Vue SFCs.\n      // It's a specialized version of @babel/preset-typescript for .vue files.\n      ['babel-preset-typescript-vue', {\n        // Options are forwarded to @babel/preset-typescript.\n        // 'isTSX: false' is typically correct for Vue SFCs unless explicitly using TSX in templates.\n        isTSX: false,\n        // 'allExtensions: true' ensures Babel processes all relevant file types, including Vue's script blocks.\n        allExtensions: true,\n        // 'allowDeclareFields: true' is often needed for modern TypeScript class syntax.\n        allowDeclareFields: true\n      }],\n      // '@babel/preset-env' transpiles modern JavaScript down to a target environment's capabilities.\n      ['@babel/preset-env', {\n        targets: {\n          // Specify your target browsers or Node.js versions.\n          // This example uses a common browserslist query.\n          browsers: ['>0.2%', 'not dead', 'not op_mini all']\n        },\n        // 'usage' automatically injects polyfills based on actual code usage and target environment.\n        useBuiltIns: 'usage',\n        // Specify the core-js version for polyfills.\n        corejs: 3\n      }]\n    ],\n    // Define plugins for experimental or non-standard JavaScript features.\n    plugins: [\n      // These plugins are typically required for TypeScript features like decorators and class properties,\n      // especially when using 'vue-class-component'.\n      ['@babel/plugin-proposal-decorators', { legacy: true }],\n      ['@babel/plugin-proposal-class-properties', { loose: true }]\n    ]\n  };\n}","lang":"typescript","description":"Demonstrates the essential `babel.config.js` configuration to integrate `babel-preset-typescript-vue`. This setup enables Babel to transpile TypeScript within Vue Single File Components (`<script lang='ts'>`) in conjunction with `@babel/preset-env` for target environment compatibility. Note that this configuration requires `babel-loader` and `vue-loader` to be set up in your build process (e.g., Webpack)."},"warnings":[{"fix":"Before implementing, check if your current `vue-loader` version or build setup (e.g., Vue CLI 3+, Vite) already handles TypeScript in Vue SFCs with `@babel/preset-typescript` directly. If so, this preset is likely unnecessary.","message":"This preset was developed as a workaround for architectural limitations in older versions of `vue-loader` regarding TypeScript compilation with Babel. Newer versions of `vue-loader` or alternative build tools may have integrated these fixes natively, making this preset redundant or potentially causing conflicts.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always pair Babel transpilation with a dedicated TypeScript type checker in your project's build pipeline to ensure type correctness and catch errors before runtime.","message":"Like `@babel/preset-typescript`, this preset only performs TypeScript *transpilation* (stripping types and converting syntax); it does *not* perform type checking. For full type safety, you must integrate a separate type-checking step (e.g., `vue-tsc`, `fork-ts-checker-webpack-plugin`) into your build process.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider migrating to more modern Vue build setups (e.g., Vue CLI 4+/5+, Vite) that often provide native or improved support for TypeScript with Babel, potentially rendering this preset obsolete.","message":"The project appears to be abandoned, with no commits or releases since February 2020. While it may still function for its intended purpose with compatible legacy setups, expect no further updates, bug fixes, or support for newer Babel/Vue versions.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Install the package as a development dependency: `npm install --save-dev babel-preset-typescript-vue` or `yarn add babel-preset-typescript-vue --dev`.","cause":"The `babel-preset-typescript-vue` package has not been installed or is not accessible in the current project's `node_modules`.","error":"Module not found: Error: Can't resolve 'babel-preset-typescript-vue'"},{"fix":"Ensure `babel-preset-typescript-vue` is correctly listed in your `babel.config.js` `presets` array, and that `allExtensions: true` is set within its options to ensure proper file processing.","cause":"Babel is not correctly processing TypeScript syntax (e.g., `import`, `export`, type annotations) within your `<script lang=\"ts\">` blocks in Vue SFCs.","error":"Syntax Error: Cannot use 'import' statement outside a module (or similar ES module error in Vue SFCs)"},{"fix":"Replace `@babel/preset-typescript` with `babel-preset-typescript-vue` in your Babel configuration for projects using TypeScript in Vue Single File Components with `vue-loader`.","cause":"The default `@babel/preset-typescript` does not inherently process `.vue` files, leading to transpilation errors when TypeScript is used in Vue SFCs. This preset specifically addresses that.","error":"Error: .vue files are not being processed by Babel's TypeScript preset"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null}