@vue/babel-preset-app

What is @vue/babel-preset-app?

@vue/babel-preset-app is a Babel preset specifically designed for Vue.js applications. It provides a set of Babel plugins and configurations that are optimized for Vue.js development, ensuring compatibility and performance improvements.

What are @vue/babel-preset-app's main functionalities?

Automatic Polyfills

This feature automatically includes polyfills based on your target environments, ensuring that your Vue.js application works across different browsers.

{
  "presets": [
    ["@vue/babel-preset-app", {
      "useBuiltIns": "entry",
      "corejs": 3
    }]
  ]
}

Modern JavaScript Syntax

This feature allows you to use modern JavaScript syntax in your Vue.js application, which will be transpiled to be compatible with older browsers.

{
  "presets": [
    ["@vue/babel-preset-app", {
      "targets": {
        "esmodules": true
      }
    }]
  ]
}

Vue JSX Support

This feature enables support for JSX syntax in Vue.js components, allowing you to write components in a syntax similar to React.

{
  "presets": [
    ["@vue/babel-preset-app", {
      "jsx": true
    }]
  ]
}

Other packages similar to @vue/babel-preset-app

@babel/preset-env

@babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). It is more general-purpose compared to @vue/babel-preset-app, which is specifically optimized for Vue.js.

babel-preset-vue

babel-preset-vue is another Babel preset for Vue.js applications. It provides a similar set of features to @vue/babel-preset-app but may not be as actively maintained or optimized for the latest Vue.js versions.

babel-preset-react

babel-preset-react is a Babel preset for React applications. While it is not designed for Vue.js, it offers similar functionalities such as JSX support and modern JavaScript syntax transpilation, tailored for React.

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

preset-env automatically determines the transforms and polyfills to apply based on your browser target. See Browser Compatibility section in docs for more details.

• modules: false
  • auto set to 'commonjs' in Jest tests
• useBuiltIns: 'usage'
• targets:
  • by default @babel/preset-env will use browserslist config sources (browserslist key in package.json file is recommend) unless either the targets or 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
• Proposal Class Properties
• Proposal Decorators (legacy)

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

Vue JSX support

• @babel/plugin-syntax-jsx
• @vue/babel-preset-jsx

@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 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 for more details.

targets

• Default:
  • @vue/babel-preset-app will use browserslist config sources (browserslist key in package.json file is recommend) unless either the targets or 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 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 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 for more details.

polyfills

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

A list of 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 (or @vue/babel-plugin-jsx 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.