# @vue/babel-preset-app

> babel-preset-app for vue-cli

Latest version **5.0.9** (published 2025-08-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue/babel-preset-app
pnpm add @vue/babel-preset-app
yarn add @vue/babel-preset-app
bun add @vue/babel-preset-app
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.0.9 |
| Published | 2025-08-21 |
| First published | 2018-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 16 |
| Unpacked size | 19 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 29541 |
| Author | Evan You |
| Maintainers | akryum, yyx990803, soda, nickmessing |
| Keywords | vue, cli |

## Links

- npm: https://www.npmjs.com/package/@vue/babel-preset-app
- Repository: https://github.com/vuejs/vue-cli
- Homepage: https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/babel-preset-app#readme
- Issues: https://github.com/vuejs/vue-cli/issues
- npm.io page: https://npm.io/package/@vue/babel-preset-app

## Dependencies (16)

- [semver](https://npm.io/package/semver.md) ^7.3.4
- [core-js](https://npm.io/package/core-js.md) ^3.8.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.12.16
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.13
- [core-js-compat](https://npm.io/package/core-js-compat.md) ^3.8.3
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.12.16
- [@vue/babel-plugin-jsx](https://npm.io/package/@vue/babel-plugin-jsx.md) ^1.0.3
- [@vue/babel-preset-jsx](https://npm.io/package/@vue/babel-preset-jsx.md) ^1.1.2
- [@babel/plugin-syntax-jsx](https://npm.io/package/@babel/plugin-syntax-jsx.md) ^7.12.13
- [@babel/helper-module-imports](https://npm.io/package/@babel/helper-module-imports.md) ^7.12.13
- [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.12.15
- [babel-plugin-dynamic-import-node](https://npm.io/package/babel-plugin-dynamic-import-node.md) ^2.3.3
- [@babel/helper-compilation-targets](https://npm.io/package/@babel/helper-compilation-targets.md) ^7.12.16
- [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.12.13
- [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3
- [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.12.13

## Alternatives

- [@salesforce/cli](https://npm.io/package/@salesforce/cli.md) — 389.7K weekly downloads
- [@mintlify/cli](https://npm.io/package/@mintlify/cli.md) — 208.9K weekly downloads
- [@grafana/e2e-selectors](https://npm.io/package/@grafana/e2e-selectors.md) — 128.7K weekly downloads
- [mintlify](https://npm.io/package/mintlify.md) — 112.0K weekly downloads
- [@intlayer/cli](https://npm.io/package/@intlayer/cli.md) — 22.8K weekly downloads

## Recent versions

- 5.0.9 (latest) — 2025-08-21
- 5.0.6 (next) — 2022-06-16
- 5.0.8 — 2022-07-07
- 5.0.7 — 2022-07-05
- 4.5.19 — 2022-06-28
- 4.5.18 — 2022-06-16
- 5.0.5 — 2022-06-16
- 4.5.17 — 2022-03-23
- 5.0.4 — 2022-03-22
- 4.5.16 — 2022-03-15
- 5.0.3 — 2022-03-15
- 5.0.2 — 2022-03-15
- 5.0.1 — 2022-02-17
- 5.0.0 — 2022-02-17
- 5.0.0-rc.3 — 2022-02-10
- … 144 more at https://npm.io/package/@vue/babel-preset-app/versions

## README

# @vue/babel-preset-app

This is the default Babel preset used in all Vue CLI projects. **Note: this preset is meant to be used exclusively in projects created via Vue CLI and does not consider external use cases.**

## Included Features

### [@babel/preset-env](https://new.babeljs.io/docs/en/next/babel-preset-env.html)

`preset-env` automatically determines the transforms and polyfills to apply based on your browser target. See [Browser Compatibility](https://cli.vuejs.org/guide/browser-compatibility.html) section in docs for more details.

- `modules: false`
  - auto set to `'commonjs'` in Jest tests
- [`useBuiltIns: 'usage'`](#usebuiltins)
- `targets`:
  - by default `@babel/preset-env` will use [`browserslist config sources`](https://github.com/browserslist/browserslist#queries) (browserslist key in package.json file is recommend) unless either the [`targets`](https://babeljs.io/docs/en/babel-preset-env#targets) or [`ignoreBrowserslistConfig`](https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig) options are set.
  - set to `{ node: 'current' }` when running unit tests in Node.js
- Includes `Promise` polyfill by default so that they are usable even in non-transpiled dependencies (only for environments that need it)

### Stage 3 or Below

Only the following stage 3 or below features are supported (object rest spread is supported as part of `preset-env`):

- [Dynamic Import Syntax](https://github.com/tc39/proposal-dynamic-import)
- [Proposal Class Properties](https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html)
- [Proposal Decorators (legacy)](https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html)

If you need additional stage 3 or below features, you need to install and configure it yourself.

### Vue JSX support

- [@babel/plugin-syntax-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-jsx)
- [@vue/babel-preset-jsx](https://github.com/vuejs/jsx)

### [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime)

`transform-runtime` avoids inlining helpers in every file. This is enabled for helpers only, since polyfills are handled by `babel-preset-env`.

## Options

- All options from [@babel/preset-env](https://babeljs.io/docs/en/next/babel-preset-env.html) are supported, with some of them having smarter defaults.

### modules

- Default:
  - `false` when building with webpack
  - `'commonjs'` when running tests in Jest.

Explicitly set `modules` option for `babel-preset-env`. See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#modules) for more details.

### targets

- Default:
  - `@vue/babel-preset-app` will use [`browserslist config sources`](https://github.com/browserslist/browserslist#queries) (browserslist key in package.json file is recommend) unless either the [`targets`](https://babeljs.io/docs/en/babel-preset-env#targets) or [`ignoreBrowserslistConfig`](https://babeljs.io/docs/en/babel-preset-env#ignorebrowserslistconfig) options are set.
  - set to `{ node: 'current' }` when running unit tests in Node.js

Explicitly set `targets` option for `babel-preset-env`. See [babel-preset-env docs](https://github.com/babel/babel/tree/master/packages/babel-preset-env#targets) for more details.

### useBuiltIns

- Default: `'usage'`
- Allowed values: `'usage' | 'entry' | false`

Explicitly set `useBuiltIns` option for `babel-preset-env`.

The default value is `'usage'`, which adds imports to polyfills based on the usage in transpiled code. For example, if you use `Object.assign` in your code, the corresponding polyfill will be auto-imported if your target environment does not supports it.

If you are building a library or web component instead of an app, you probably want to set this to `false` and let the consuming app be responsible for the polyfills.

Note that the usage detection does not apply to your dependencies (which are excluded by `cli-plugin-babel` by default). If one of your dependencies need polyfills, you have a few options:

1. **If the dependency is written in an ES version that your target environments do not support:** Add that dependency to the `transpileDependencies` option in `vue.config.js`. This would enable both syntax transforms and usage-based polyfill detection for that dependency.

2. **If the dependency ships ES5 code and explicitly lists the polyfills needed:** you can pre-include the needed polyfills using the [polyfills](#polyfills) option for this preset.

3. **If the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g. Vuetify):** Use `useBuiltIns: 'entry'` and then add `import '@babel/polyfill'` to your entry file. This will import **ALL** polyfills based on your `browserslist` targets so that you don't need to worry about dependency polyfills anymore, but will likely increase your final bundle size with some unused polyfills.

See [@babel/preset-env docs](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage) for more details.

### polyfills

- Default: `['es.array.iterator', 'es.promise', 'es.object.assign', 'es.promise.finally']`

A list of [core-js](https://github.com/zloirock/core-js) polyfills to pre-include when using `useBuiltIns: 'usage'`. **These polyfills are automatically excluded if they are not needed for your target environments**.

Use this option when you have 3rd party dependencies that are not processed by Babel but have specific polyfill requirements (e.g. Axios and Vuex require Promise support).

### jsx

- Default: `true`.

Set to `false` to disable JSX support. Or you can toggle [@vue/babel-preset-jsx](https://github.com/vuejs/jsx/tree/dev/packages/babel-preset-jsx) (or [@vue/babel-plugin-jsx](https://github.com/vuejs/jsx-next) for Vue 3 projects) features here.

### loose

- Default: `false`.

Setting this to `true` will generate code that is more performant but less spec-compliant.

### entryFiles

- Default: `[]`

Multi page repo use `entryFiles` to ensure inject polyfills to all entry file.

---
_Source: https://npm.io/package/@vue/babel-preset-app · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
