Babel Preset for Vue Applications

2.0.0 · maintenance · verified Wed Apr 22

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.

Common errors

```
TypeError: 'myString'.includes is not a function
```
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.

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';`).
```
Error: .babelrc 'targets' option does not support 'esmodules'.
```
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.

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.

Warnings

gotcha 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.
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.
gotcha 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.
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.
deprecated 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.
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.

Install

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

Imports

vue-app
```
{
  "presets": ["vue-app"]
}
```
This preset is configured in your Babel configuration file (e.g., `.babelrc` or `babel.config.js`), not imported as a JavaScript module.
babel.config.js
wrong:
```
import vueAppPreset from 'babel-preset-vue-app';
```
correct:
```
module.exports = {
  presets: [
    ['vue-app', { useBuiltIns: true, targets: { esmodules: true } }]
  ]
}
```
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.

Quickstart

Shows the minimal `.babelrc` configuration to enable the `babel-preset-vue-app`.

{
  "presets": [
    "vue-app"
  ]
}

view raw JSON →