@nuxt/babel-preset-app

What is @nuxt/babel-preset-app?

@nuxt/babel-preset-app is a Babel preset specifically designed for Nuxt.js applications. It provides a set of Babel plugins and configurations optimized for Nuxt.js, enabling developers to write modern JavaScript code that is transpiled to be compatible with older browsers.

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

Transpile modern JavaScript

This feature allows you to transpile modern JavaScript (ES6/ES7) to ES5, making it compatible with older browsers. By including '@nuxt/babel-preset-app' in your Babel configuration, you ensure that your code is processed with the appropriate plugins and settings for Nuxt.js.

module.exports = {
  presets: [
    '@nuxt/babel-preset-app'
  ]
};

Automatic polyfills

This feature automatically includes polyfills based on your code usage. By setting 'useBuiltIns' to 'usage' and specifying the core-js version, you ensure that only the necessary polyfills are included, optimizing the bundle size.

module.exports = {
  presets: [
    ['@nuxt/babel-preset-app', {
      useBuiltIns: 'usage',
      corejs: 3
    }]
  ]
};

Custom Babel plugins

This feature allows you to add custom Babel plugins to your configuration. In this example, the '@babel/plugin-proposal-class-properties' plugin is added to support class properties syntax in your JavaScript code.

module.exports = {
  presets: [
    '@nuxt/babel-preset-app'
  ],
  plugins: [
    '@babel/plugin-proposal-class-properties'
  ]
};

Other packages similar to @nuxt/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 @nuxt/babel-preset-app, which is specifically optimized for Nuxt.js applications.

babel-preset-react-app

babel-preset-react-app is a Babel preset used by Create React App. It includes a set of Babel plugins and configurations optimized for React applications. While it serves a similar purpose to @nuxt/babel-preset-app, it is tailored for React rather than Nuxt.js.

babel-preset-vue

babel-preset-vue is a Babel preset for Vue.js applications. It provides a set of Babel plugins and configurations optimized for Vue.js, similar to how @nuxt/babel-preset-app is optimized for Nuxt.js. However, it is more general for Vue.js projects and not specifically for Nuxt.js.

README

@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-proposal-decorators, @babel/plugin-proposal-class-properties, @babel/plugin-transform-runtime. Furthermore the preset is adding polyfills.

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

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(env, [ preset, options ]) {
    return [
      [ "@nuxt/babel-preset-app", options ]
    ]
  }
}

env is an object which contains envName (server, client, modern) and all nuxtEnv properties (isDev, isServer, isClient, isModern, isLegacy)

preset is the preset package name @nuxt/babel-preset-app

options is an object with parameters, for example:

const options = {
  useBuiltIns: "entry"
}

Below is a list of all available options parameters:

Options

• bugfixes - @babel/preset-env
• 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 true, 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
• 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
• corejs, default { version: 2 } - '@babel/preset-env' parameter

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

Example 1. Change targets for server and client respectively

export default {
  build: {
    babel: {
      presets({ envName }) {
        const envTargets = {
          client: { browsers: ["last 2 versions"], ie: 11 },
          server: { node: "current" },
        }
        return [
          [
            "@nuxt/babel-preset-app",
            {
              targets: envTargets[envName]
            }
          ]
        ]
      }
    }
  }
}

Example 2. Use core-js@3

NOTE: Make sure that all dependencies have been upgraded to use core-js@3. If core-js@2 and core-js@3 are both dependent, babel may resolve incorrect core-js package which is hoisted by yarn/npm.

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

export default {
  build: {
    babel: {
      // envName: server, client, modern
      presets({ envName }) {
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }
}