Registry / web-framework / babel-preset-vue-app

babel-preset-vue-app

library2.0.0jsnpmunverified

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.

web-framework

npm install babel-preset-vue-app

github ↗package ↗

INSTALL

IMPORT

SIG · BABEL-PRESET-VUE-A

babel-preset-vue-app

web-frameworkjavascriptv2.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

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

✓ module.exports = { presets: [ ['vue-app', { useBuiltIns: true, targets: { esmodules: true } }] ] }

✗ import vueAppPreset from 'babel-preset-vue-app';

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.

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

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

Debug

Known issues

gotchaThe `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.

affects: >=2.0.0

gotchaThe 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.

affects: >=2.0.0

deprecatedThis 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.

affects: <3.x

Errors

Common errors & fixes

TypeError: 'myString'.includes is not a function

`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'.

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.

Upgrade

Version history

2.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

11 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/egoist/babel-preset-vue-app ↗

packagehttps://www.npmjs.com/package/babel-preset-vue-app ↗