{"id":16760,"library":"babel-preset-vue-app","title":"Babel Preset for Vue Applications","description":"The `babel-preset-vue-app` package provides a consolidated Babel preset specifically tailored for Vue.js applications. Currently at version 2.0.0, this preset simplifies Babel configuration by integrating `babel-preset-env` for efficient polyfilling and targeting various JavaScript environments, and `babel-plugin-transform-runtime` to avoid polluting the global scope with polyfills. It additionally includes support for transforming Vue JSX, ES features like object rest/spread properties, dynamic imports, and modern `async/await` syntax. This preset aims to offer an opinionated, ready-to-use configuration for Vue projects, often serving as a foundational element in build setups from older Vue CLI versions or custom configurations. Its release cadence is primarily driven by updates to its underlying Babel dependencies. A key differentiator is its comprehensive, single-package approach to common Vue Babel needs, contrasting with a manual assembly of individual Babel plugins and presets.","status":"maintenance","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/egoist/babel-preset-vue-app","tags":["javascript"],"install":[{"cmd":"npm install babel-preset-vue-app","lang":"bash","label":"npm"},{"cmd":"yarn add babel-preset-vue-app","lang":"bash","label":"yarn"},{"cmd":"pnpm add babel-preset-vue-app","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This preset is configured in your Babel configuration file (e.g., `.babelrc` or `babel.config.js`), not imported as a JavaScript module.","symbol":"vue-app","correct":"{\n  \"presets\": [\"vue-app\"]\n}"},{"note":"For more advanced configuration, use a `babel.config.js` file to pass options to the preset. Do not use `require` or `import` directly for the preset itself in your application code.","wrong":"import vueAppPreset from 'babel-preset-vue-app';","symbol":"babel.config.js","correct":"module.exports = {\n  presets: [\n    ['vue-app', { useBuiltIns: true, targets: { esmodules: true } }]\n  ]\n}"}],"quickstart":{"code":"{\n  \"presets\": [\n    \"vue-app\"\n  ]\n}","lang":"javascript","description":"Shows the minimal `.babelrc` configuration to enable the `babel-preset-vue-app`."},"warnings":[{"fix":"To enable global polyfilling for these features (which modifies prototypes), set `useBuiltIns: true` in the preset options and ensure `core-js` is installed and imported globally (e.g., `import 'core-js/stable';`). Alternatively, manually import specific `core-js` shims where needed.","message":"The `useBuiltIns` option defaults to `false`. This means `babel-plugin-transform-runtime` is active, which does not polyfill instance methods on built-in prototypes (e.g., `Array.prototype.includes`, `String.prototype.padStart`) or global constructors like `Promise` at the global level. Developers expecting full polyfilling across all native objects without external `core-js` imports might encounter runtime errors in older browsers.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"It is recommended to explicitly configure the `targets` option within the preset to precisely match your application's supported browser matrix (e.g., `{ browsers: ['last 2 versions', 'not dead', '> 0.2%'] }`) to optimize bundle size and performance.","message":"The default `targets` for browsers (`{ ie: 9, uglify: true }` when not in a `test` environment) are quite broad and potentially outdated for modern Vue applications. This could lead to larger bundle sizes or unnecessary transformations if your actual target environments are more modern and support newer JavaScript features natively.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For new Vue projects, consider using `@vue/babel-preset-app` (installed via Vue CLI) or a custom Babel configuration tailored to your specific needs, leveraging individual Babel plugins and `babel-preset-env` directly.","message":"This preset's naming convention (`babel-preset-vue-app`) is characteristic of older Vue CLI versions. For new Vue projects initiated with Vue CLI 3+, the official preset is `@vue/babel-preset-app`. While still functional, this specific preset might receive fewer updates or lack features introduced in newer `@vue` ecosystem tools.","severity":"deprecated","affected_versions":"<3.x"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Set `useBuiltIns: true` in your preset options and add `import 'core-js/stable';` at the entry point of your application, or manually import specific `core-js` shims for the missing features (e.g., `import 'core-js/features/string/includes';`).","cause":"`babel-plugin-transform-runtime` (used by this preset) does not polyfill instance methods on built-in prototypes or global constructors like `Promise` at the global level.","error":"TypeError: 'myString'.includes is not a function"},{"fix":"Ensure you are using a compatible Babel version. If the problem persists, use a traditional browser list for `targets` (e.g., `targets: { browsers: ['last 2 versions'] }`) or define separate `env` configurations for modules and non-modules.","cause":"The `targets` option is being used with a value like `esmodules: true` but the Babel environment or an older Babel core version does not fully support this configuration syntax or interpretation yet.","error":"Error: .babelrc 'targets' option does not support 'esmodules'."}],"ecosystem":"npm","meta_description":null}