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

babel-preset-typescript-vue

library1.1.1jsnpmunverified

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.

web-framework

npm install babel-preset-typescript-vue

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-TYPES

babel-preset-typescript-vue

web-frameworkjavascriptv1.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-vue

✓ module.exports = { presets: ['babel-preset-typescript-vue'] }

✗ import { babelPresetTypescriptVue } from 'babel-preset-typescript-vue'

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.

babel-preset-typescript-vue with options

✓ module.exports = { presets: [['babel-preset-typescript-vue', { isTSX: false, allExtensions: true }]] }

✗ module.exports = { presets: [{ 'babel-preset-typescript-vue': { isTSX: false } }] }

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`.

require.resolve()

✓ module.exports = { presets: [require.resolve('babel-preset-typescript-vue')] }

✗ const preset = require('babel-preset-typescript-vue');

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.

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).

{ // babel.config.js // This file defines your Babel configuration. module.exports = { // Define the presets Babel should use for transpilation. presets: [ // 'babel-preset-typescript-vue' is essential for enabling TypeScript in Vue SFCs. // It's a specialized version of @babel/preset-typescript for .vue files. ['babel-preset-typescript-vue', { // Options are forwarded to @babel/preset-typescript. // 'isTSX: false' is typically correct for Vue SFCs unless explicitly using TSX in templates. isTSX: false, // 'allExtensions: true' ensures Babel processes all relevant file types, including Vue's script blocks. allExtensions: true, // 'allowDeclareFields: true' is often needed for modern TypeScript class syntax. allowDeclareFields: true }], // '@babel/preset-env' transpiles modern JavaScript down to a target environment's capabilities. ['@babel/preset-env', { targets: { // Specify your target browsers or Node.js versions. // This example uses a common browserslist query. browsers: ['>0.2%', 'not dead', 'not op_mini all'] }, // 'usage' automatically injects polyfills based on actual code usage and target environment. useBuiltIns: 'usage', // Specify the core-js version for polyfills. corejs: 3 }] ], // Define plugins for experimental or non-standard JavaScript features. plugins: [ // These plugins are typically required for TypeScript features like decorators and class properties, // especially when using 'vue-class-component'. ['@babel/plugin-proposal-decorators', { legacy: true }], ['@babel/plugin-proposal-class-properties', { loose: true }] ] }; }

Debug

Known issues

gotchaThis 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.

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.

affects: >=1.0.0

gotchaLike `@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.

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.

affects: >=1.0.0

deprecatedThe 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'babel-preset-typescript-vue'

The `babel-preset-typescript-vue` package has not been installed or is not accessible in the current project's `node_modules`.

fix

Install the package as a development dependency: `npm install --save-dev babel-preset-typescript-vue` or `yarn add babel-preset-typescript-vue --dev`.

Syntax Error: Cannot use 'import' statement outside a module (or similar ES module error in Vue SFCs)

Babel is not correctly processing TypeScript syntax (e.g., `import`, `export`, type annotations) within your `<script lang="ts">` blocks in Vue SFCs.

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.

Error: .vue files are not being processed by Babel's TypeScript preset

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.

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`.

Upgrade

Version history

1.1.1latest on npm

Audit

Dependencies

@babel/corerequiredRequired peer dependency for any Babel preset to function within a Babel 7.x environment.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/pawelgabryelewicz/babel-preset-typescript-vue ↗

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