# dn-nuxt-config

> Extends default nuxt config with some useful optimisations

Latest version **5.2.0** (published 2023-03-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install dn-nuxt-config
pnpm add dn-nuxt-config
yarn add dn-nuxt-config
bun add dn-nuxt-config
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.2.0 |
| Published | 2023-03-06 |
| First published | 2019-05-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 18 |
| Unpacked size | 31.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Freek van Rijt |
| Maintainers | freekvr |

## Links

- npm: https://www.npmjs.com/package/dn-nuxt-config
- Repository: https://gitlab.digitalnatives.nl/digital-natives/dn-nuxt-config
- npm.io page: https://npm.io/package/dn-nuxt-config

## Dependencies (18)

- [path](https://npm.io/package/path.md) ^0.12.7
- [svgo](https://npm.io/package/svgo.md) ^2.3.0
- [consola](https://npm.io/package/consola.md) ^2.15.3
- [postcss](https://npm.io/package/postcss.md) ^8.0.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) ^4.0.0
- [imagemin-svgo](https://npm.io/package/imagemin-svgo.md) ^9.0.0
- [@nuxt/postcss8](https://npm.io/package/@nuxt/postcss8.md) ^1.1.3
- [imagemin-mozjpeg](https://npm.io/package/imagemin-mozjpeg.md) ^9.0.0
- [imagemin-optipng](https://npm.io/package/imagemin-optipng.md) ^8.0.0
- [imagemin-gifsicle](https://npm.io/package/imagemin-gifsicle.md) ^7.0.0
- [imagemin-jpegtran](https://npm.io/package/imagemin-jpegtran.md) ^7.0.0
- [imagemin-pngquant](https://npm.io/package/imagemin-pngquant.md) ^9.0.2
- [babel-plugin-lodash](https://npm.io/package/babel-plugin-lodash.md) ^3.3.4
- [@nuxtjs/eslint-module](https://npm.io/package/@nuxtjs/eslint-module.md) ^3.0.2
- [@nuxtjs/stylelint-module](https://npm.io/package/@nuxtjs/stylelint-module.md) ^4.0.0
- [postcss-object-fit-images](https://npm.io/package/postcss-object-fit-images.md) ^1.1.2
- [speed-measure-webpack-plugin](https://npm.io/package/speed-measure-webpack-plugin.md) ^1.4.2
- [image-minimizer-webpack-plugin](https://npm.io/package/image-minimizer-webpack-plugin.md) ^1.0.0

## Recent versions

- 5.2.0 (latest) — 2023-03-06
- 5.1.0 — 2023-02-07
- 5.0.1 — 2021-06-17
- 5.0.0 — 2021-05-14
- 4.0.6 — 2021-05-07
- 4.0.5 — 2021-05-07
- 4.0.4 — 2021-05-07
- 4.0.3 — 2021-05-07
- 4.0.2 — 2021-04-15
- 4.0.1 — 2021-04-15
- 4.0.0 — 2021-03-12
- 3.0.1 — 2021-02-15
- 3.0.0 — 2021-02-15
- 2.0.0 — 2020-12-14
- 1.0.6 — 2020-12-14
- … 11 more at https://npm.io/package/dn-nuxt-config/versions

## README

# 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`

```javascript
{
  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.

```javascript
{
  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`
```javascript
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](https://caniuse.com/?search=esmodules) 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`
1. If your application _only_ targets "evergreen" or otherwise recent browsers which all [support javascript modules](https://caniuse.com/?search=esmodules):
  - 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

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

3. 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`
```javascript
{
  buildModules: [
    ['dn-nuxt-config', { objectFitPolyfill: true }]
  ]
}
```

## Changelog
See [CHANGELOG.md](./CHANGELOG.md)

## Contributing
Please submit contributions through a merge request.

All commits on this repository MUST comply with the [Conventional Commits Standard](https://www.conventionalcommits.org/en/v1.0.0/#summary).
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](https://www.npmjs.com/package/commitizen) to learn the ropes.

## Releasing
Only package maintainers should release new versions.
A changelog is automatically maintained using [standard-version](https://www.npmjs.com/package/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.

---
_Source: https://npm.io/package/dn-nuxt-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._