Nuxt/packages/babel-preset-app

@nuxt/babel-preset-app

Default babel preset for nuxt

Usage

This is the default preset used by Nuxt, which is mainly a wrapper around the @babel/preset-env preset. It also optionally uses the @vue/babel-preset-jsx preset as well as @babel/plugin-syntax-dynamic-import, @babel/plugin-proposal-decorators, @babel/plugin-proposal-class-properties, @babel/plugin-transform-runtime. Furthermore the preset is adding polyfills.

Usually, no additional configuration is required. If needed though, there is an option to fine-tune the preset's behavior. Just add the following to nuxt.config.js:

babel: {
  presets({ isServer }) {
    return [
      [ "@nuxt/babel-preset-app", options ]
    ]
  }
}

Note: Since core-js@2 and core-js@3 are both supported from Babel 7.4.0, we recommend directly adding core-js and setting the version via the corejs option.

yarn add --dev core-js@3 @babel/runtime-corejs3

# or

yarn add --dev core-js@2 @babel/runtime-corejs2

...where options is an object with parameters, for example:

 const options = {
  useBuiltIns: "entry"
}

Below is a list of all available parameters:

Options

• buildTarget - passed in through the Builder, either "server" or "client"
• configPath - @babel/preset-env parameter
• forceAllTransforms - '@babel/preset-env' parameter
• debug, default false - '@babel/preset-env' parameter
• decoratorsBeforeExport
• decoratorsLegacy, default true
• exclude - '@babel/preset-env' parameter
• ignoreBrowserslistConfig, defaults to value of modern - '@babel/preset-env' parameter
• include - '@babel/preset-env' parameter
• jsx, default truish, can be a an object passed as params to @vue/babel-preset-jsx`
• loose, default false - '@babel/preset-env' parameter and also sets loose=true for @babel/plugin-proposal-class-properties
• modern passed by builder, either true or false
• modules, default false - '@babel/preset-env' parameter
• polyfills, default core-js@2: ['es6.array.iterator','es6.promise','es6.object.assign','es7.promise.finally'], core-js@3: ['es.array.iterator','es.promise','es.object.assign','es.promise.finally'], more in the corresponding repository
• shippedProposals - '@babel/preset-env' parameter
• spec - '@babel/preset-env' parameter
• targets - '@babel/preset-env' parameter
• useBuiltIns, default "usage" - '@babel/preset-env' parameter

There are detailed docs for the parameters of '@babel/preset-env'.

Example 1. Change targets for server and client respectively

babel: {
  presets({ isServer }) {
    return [
      [
        "@nuxt/babel-preset-app",
        {
          targets: isServer
            ? { node: "current" }
            : { browsers: ["last 2 versions"], ie: 11 }
        }
      ]
    ]
  }
},