Registry / web-framework / babel-preset-vue

babel-preset-vue

library2.0.2jsnpmunverified

babel-preset-vue is a Babel preset designed to enable Vue-specific JSX features, such as event modifiers (e.g., `onClick:prevent`) and `v-model` directives, within JavaScript files. It bundles and configures `babel-plugin-jsx-event-modifier` and `babel-plugin-jsx-v-model` to provide these functionalities, primarily targeting applications built with Vue 2. The package is currently at version 2.0.2 and appears to be unmaintained, with its last commit occurring in 2019 and last publish 4 years ago. It explicitly notes that some of its features are not available for Babel v7 or later. For modern Vue 3 projects and up-to-date Babel support, the recommended preset is `@vue/babel-preset-jsx` or `@vue/babel-plugin-jsx`, which offers similar functionalities with active maintenance and broader compatibility.

web-framework

npm install babel-preset-vue

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-VUE

babel-preset-vue

web-frameworkjavascriptv2.0.2

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Configures Babel via `.babelrc` to use the `babel-preset-vue` preset, explicitly showing how to enable or disable its core features for Vue-specific JSX transformations.

{ "presets": [ ["vue", { "eventModifiers": true, // Enable event modifiers, default is true "vModel": true // Enable v-model support, default is true }] ] }

Debug

Known issues

breakingSome JSX features provided by `babel-preset-vue` are explicitly noted as 'not available for babel v7 currently.' This preset is not compatible with modern Babel 7.x or later for all features.

fix

Migrate to `@vue/babel-preset-jsx` for Vue 2/3 compatibility with Babel 7+, or `@vue/babel-plugin-jsx` for Vue 3 specific projects.

affects: >=2.0.0

gotchaThe `babel-preset-vue` package is no longer actively maintained. Its last publish was over 4 years ago, and GitHub activity ceased in 2019. This means it will not receive updates for new Vue versions (e.g., Vue 3) or latest Babel changes.

fix

Avoid using this preset for new projects. For existing projects, consider migrating to `@vue/babel-preset-jsx` or `@vue/babel-preset-app` (if using Vue CLI) to ensure compatibility and ongoing support.

affects: >=2.0.0

gotchaThis preset primarily targets Vue 2's JSX syntax. For Vue 3, the JSX transformation logic differs, and this preset does not provide official or up-to-date support.

fix

Use `@vue/babel-preset-jsx` for Vue 3 projects that require JSX. This preset provides specific options for Vue 3's Composition API and other modern features.

affects: >=2.0.0

gotchaThe documentation does not mention TypeScript support. For Vue SFCs (Single File Components) with `<script lang="ts">` and JSX, specific TypeScript-aware Babel presets are often required, such as `babel-preset-typescript-vue3` for Babel 7.x and Vue 3.

fix

When using TypeScript with Vue JSX, consider `babel-preset-typescript-vue` or `babel-preset-typescript-vue3` alongside or instead of this preset, or ensure your build setup correctly handles `.tsx` files if applicable.

affects: >=2.0.0

Errors

Common errors & fixes

Error: Unknown preset 'vue' specified in "base" at 0

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

fix

Ensure the package is installed: `npm install --save-dev babel-preset-vue` or `yarn add --dev babel-preset-vue`.

SyntaxError: Unexpected token ':'

Vue JSX event modifiers (e.g., `onClick:prevent`) are not being correctly transformed by Babel, likely because the `babel-preset-vue` is not active, incorrectly configured, or incompatible with the Babel version.

fix

Verify that `babel-preset-vue` is listed in your `.babelrc` or `babel.config.js` presets, and ensure its `eventModifiers` option is not set to `false`. If using Babel 7+, consider migrating to `@vue/babel-preset-jsx`.

SyntaxError: Unexpected token '-'

Vue JSX `v-model` (e.g., `<input v-model={this.text} />`) is not being correctly transformed by Babel, indicating that `babel-preset-vue` might be missing, misconfigured, or incompatible.

fix

Confirm `babel-preset-vue` is active in your Babel configuration and its `vModel` option is not `false`. For modern setups, `@vue/babel-preset-jsx` offers `v-model` support.

Upgrade

Version history

2.0.2latest on npm

Audit

Dependencies

@babel/corerequiredRequired peer dependency for any Babel preset to function.

babel-plugin-jsx-event-modifierrequiredProvides support for Vue's JSX event modifiers. Bundled by this preset.

babel-plugin-jsx-v-modelrequiredProvides support for Vue's JSX v-model directive. Bundled by this preset.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/egoist/babel-preset-vue ↗

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