{"id":14458,"library":"babel-preset-vue","title":"Babel Preset for Vue JSX","description":"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.","status":"abandoned","version":"2.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/babel-preset-vue","tags":["javascript","babel","vue","jsx","preset"],"install":[{"cmd":"npm install babel-preset-vue","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-vue","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-vue","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required peer dependency for any Babel preset to function.","package":"@babel/core","optional":false},{"reason":"Provides support for Vue's JSX event modifiers. Bundled by this preset.","package":"babel-plugin-jsx-event-modifier","optional":false},{"reason":"Provides support for Vue's JSX v-model directive. Bundled by this preset.","package":"babel-plugin-jsx-v-model","optional":false}],"imports":[],"quickstart":{"code":"{\n  \"presets\": [\n    [\"vue\", {\n      \"eventModifiers\": true, // Enable event modifiers, default is true\n      \"vModel\": true          // Enable v-model support, default is true\n    }]\n  ]\n}","lang":"json","description":"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."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the package is installed: `npm install --save-dev babel-preset-vue` or `yarn add --dev babel-preset-vue`.","cause":"The `babel-preset-vue` package has not been installed or is not resolvable in the project's node_modules.","error":"Error: Unknown preset 'vue' specified in \"base\" at 0"},{"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`.","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.","error":"SyntaxError: Unexpected token ':'"},{"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.","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.","error":"SyntaxError: Unexpected token '-'"}],"ecosystem":"npm"}