dn-nuxt-config

dn-nuxt-config

This package adds a number of common optimisations to the nuxt default config:

• Changes babel config to use .browserlistrc or browserlists from package.json
• Adds babel-plugin-lodash plugin to babel plugins
• Adds an eslint-loader to webpack config so eslint errors are shown during development
• Adds a stylelint-loader to webpack config so sylelint errors are shown during development
• Adds imagemin to optimize static nuxt assets: https://github.com/nuxt-community/imagemin-module
• Adds an object-fit polyfill: https://github.com/bfred-it/object-fit-images
• Allows for debugging build times: https://github.com/stephencookdev/speed-measure-webpack-plugin
• Optionally improve your development build times by enabling the experimental boost mode
• Optionally disable the webpack error overlay by setting an environment variable (NUXT_DISABLE_OVERLAY=true)
• Replaces Nuxt PostCSS version 7 with version 8

Requirements

• Node version 10, 12 or 14
• Nuxt 2.15.3 or newer

How to add dn-nuxt-config to your project

yarn add dn-nuxt-config --dev

Add dn-nuxt-config to buildModules section of nuxt.config.js

{
  buildModules: [
    'dn-nuxt-config'
  ]
}

Configuration

You can configure and disable/enable many behaviours with custom module config.

The settings are documented below with their default values. If you do not define any settings, the default will always apply.

{
  buildModules: [
    ['dn-nuxt-config', {
      eslint: true, // Set to `false` to disable stylelint checks and output in webpack
      stylelint: true, // Set to `false` to disable stylelint checks and output in webpack
      objectFitPolyfill: false, // Enable to add a javscript/css object-fit polyfill for older browsers: https://github.com/bfred-it/object-fit-images
      measure: false, // Enabling outputs build time from https://github.com/stephencookdev/speed-measure-webpack-plugin
      boost: false, // Enabling sets experimental nuxt performance-improvements (dev-only)
      useBabelRc: false, // Loads a `.babelrc` file with config, rather than using only what's defined in your `nuxt.config.js` and the default nuxt preset.
      skipLodashPlugin: false // Set to `true` to disable lodash bundle size optimisation. Only disable this if you're NOT using lodash in your project
      babelBrowserListsForLegacy: true // Enabling overrides the nuxt default browser support for your "legacy" client bundle (ie: 9) with a list of browsers from a browserslist-compatible config in your project: https://browsersl.ist/
      babelBrowserListsForLegacy: true // Enabling overrides the default browser support for your "modern" client bundle (esmodule: true) with a list of browsers esmodule-compatible browsers from a browserslist-compatible config: https://browsersl.ist/
    }]
  ]
}

Some modules are loaded with a default config, refer to their README for customisation:

• Imagemin: https://github.com/nuxt-community/imagemin-module
• Stylelint: https://github.com/nuxt-community/stylelint-module
• Eslint: https://github.com/nuxt-community/eslint-module

Disabling the error overlay

This module provides a convenience option to disable the default webpack error overlay easily using an enviroment variable.

If you set this globally on your system (eg ~/.profile or ~/.bashrc) it will disable the overlay across all your projects which apply this module.

Usage; NUXT_DISABLE_OVERLAY=true yarn dev.

If you want to disable the overlay for everyone in your project (not recommended) you can use the vanilla nuxt option;

nuxt.config.js

export default {
  [...]
  build: {
    friendlyErrors: false
  }
}

Understanding the babel options

Nuxt ships with the following default babel config:

• A "server" bundle optimized for the node version running on the (build) server
• A "client" (legacy) bundle optimized for IE9 and later
• A "client" modern bundle, with support for any browser with esmodule support (but only if modern: true or modern: client is set in your nuxt.config.js)

If enabled, modern browsers with module support will always load the modern bundle.

You can override any of these settings by defining an override for build.babel.presets in your config. This module attempts to make some of the workarounds to use browserslist configs easier, but you can still override with your custom presets or browser targets. Any custom presets config in your nuxt.config.js will always override any settings changed by this module

Changing the defaults

When enabled with the default config, this module replaces some of the babel config outlined above to use a browserslist configured in your project.

A "client" (legacy) bundle optimized for IE9 and later With a config which will load a list of browsers to support from a "browserslist"-config in your project. This config will usually live inside your package.json or a dedicated .browserslistrc file in your root folder.

A "client" modern bundle, with support for any browser with esmodule support The modern bundle will be build for a subset of your browserslist: Only browsers in your browserslist which support esmodules.

When to change the babel-browserslist overrides

Note: Your own config will always take priority over the browserslist defaults. You can mix-and-match or override the targets with custom config even if you use babelBrowsersListForXXX: true

• If your application only targets "evergreen" or otherwise recent browsers which all support javascript modules:

• Set your browserslist config to those browsers
• Set babelBrowserListsForLegacy: false: This will give you a larger "legacy" bundle, which will not however be loaded into any of your supported browsers
• Set babelBrowserListsForModern: true: This will give you a smaller "modern" bundle for your supported browsers, since you are only supporting a subset of the default target for this build

• If your application targets both "evergreen" browsers and a subset of some older browsers without esmodules support:

• Set your browserslist config to those browsers
• You can use the defaults as set by this package, explained below:
• Use the default babelBrowserListsForLegacy: true: This will give you a smaller "legacy" bundle, since you are likely working with more recent browsers than the default ie: 9
• Set babelBrowserListsForModern: true: This will support a subset of the browsers in your browserslist which have esmodule support and make this bundle smaller for them

• If you don't have a browserslist or don't want to use the same list for both css and javscript:

• Set babelBrowserListsForLegacy: false and babelBrowserListsForModern: false
• You can set your own targets in your nuxt.config.js or use the nuxt defaults

Using the object-fit polyfill

You can add a polyfill to support the CSS object-fit rule in older browsers. It is disabled by default.

Install the polyfill: yarn add object-fit-images

Enable it in your nuxt.config.js

{
  buildModules: [
    ['dn-nuxt-config', { objectFitPolyfill: true }]
  ]
}

Changelog

See CHANGELOG.md

Contributing

Please submit contributions through a merge request.

All commits on this repository MUST comply with the Conventional Commits Standard. Running yarn install on your local machine should enforce all local commits to adhere to this standard. If you're new to conventional commits you're encouraged to use Comittizen to learn the ropes.

Releasing

Only package maintainers should release new versions. A changelog is automatically maintained using standard-version. Run yarn run release to bump/tag the version, generate the changelog and immediately publish the next release

note: Don't fill out the version number in the prompt. Just immediatly press "enter". This is because yarn run release is a combination of standard-version and vanilla yarn publish, where the latter will prompt you for a new version which standard-version has already incremeted automatically.