Babel Preset for Vue JSX

2.0.2 · abandoned · verified Sun Apr 19

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.

Common errors

```
Error: Unknown preset 'vue' specified in "base" at 0
```
cause 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 ':'
```
cause 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 '-'
```
cause 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.

Warnings

breaking Some 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.
gotcha The `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.
gotcha This 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.
gotcha The 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.

Install

npm install babel-preset-vue npm
yarn add babel-preset-vue yarn
pnpm add babel-preset-vue pnpm

Quickstart

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
    }]
  ]
}

view raw JSON →