---
title: '@nuxt/eslint-config'
---

Shared ESLint config for Nuxt projects. Unopinionated by default, but customizable.

:::callout{icon="i-ph-lightbulb-duotone"}
We recommand to use directly the [ESLint Module](/packages/module) that will provide project-aware ESLint config and Nuxt DevTools integration on top of this config.
:::

::read-more
---
to: https://github.com/nuxt/eslint/tree/main/packages/eslint-config
color: gray
icon: i-simple-icons-github
---
Source code on GitHub
::


## Configurations

Since version v1.0, we provide in the flat config format. The entry `@nuxt/eslint-config` provides a factory function to create a project-aware ESLint config for Nuxt projects. It is unopinionated by default but customizable by passing options to the factory function. Used by [`@nuxt/eslint`](/packages/module) module to generate project-aware ESLint config.

1. Install this package and `eslint` in your `devDependencies`.

::code-group
```bash [yarn]
yarn add --dev @nuxt/eslint-config eslint
```
```bash [npm]
npm install --save-dev @nuxt/eslint-config eslint
```
```bash [pnpm]
pnpm add -D @nuxt/eslint-config eslint
```
```bash [bun]
bun add -D @nuxt/eslint-config eslint
```
::

2. Import the config factory function from `@nuxt/eslint-config` entry in your `eslint.config.mjs`:

```js [eslint.config.mjs]
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  // options here
})
```

You might also want to add a script entry to your `package.json`:

```json [package.json]
{
  "scripts": {
    "lint": "eslint ."
  }
}
```

### Customizing the Config

Note that `createConfigForNuxt()` returns a chainable [`FlatConfigComposer` instance](https://github.com/antfu/eslint-flat-config-utils#composer) from [`eslint-flat-config-utils`](https://github.com/antfu/eslint-flat-config-utils) which allows you to manipulate the ESLint flat config with ease. If you want to combine with other configs, you can use the `.append()` method:

```js [eslint.config.mjs]
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  // options here
})
  .prepend(
    // ...Prepend some flat configs in front
  )
  // Override some rules in a specific config, based on their name
  .override('nuxt/typescript/rules', {
    rules: {
      // ...Override rules, for example:
      '@typescript-eslint/ban-types': 'off'
    }
  })
  // ...you can chain more operations as needed
```

`FlatConfigComposer` is also a Promise object, that you can use `await` to get the final config object.

### Module Authors

This config also provides rules for module/library authors. You can enable them by setting the `features.tooling` option to `true`:

:::callout{icon="i-ph-crane-tower-duotone" color="amber"}
This feature is experimental and may change in the future.
:::

```js [eslint.config.mjs]
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  features: {
    tooling: true
  }
})
```

This will enable rules with `unicorn`, `regexp` and `jsdoc` plugins, to ensure your module is following best practices.

You can also turn them off individually by providing an object with the rule names set to `false`:

```js [eslint.config.mjs]
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  features: {
    tooling: {
      regexp: false,
    }
  }
})
```

## ESLint Stylistic

Similar to the [ESLint Module](https://eslint.nuxt.com/packages/module#eslint-stylistic), you can opt-in by setting `stylistic` to `true` in the `features` module options.

```js [eslint.config.mjs]
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  features: {
    stylistic: true // <---
  }
})
```

Learn more about all the available options in the [ESLint Stylistic documentation](https://eslint.style/guide/config-presets#configuration-factory).

## Type Aware Rules

This config also provides type-aware rules for TypeScript and Vue. You can enable them by setting `features.typescript` to an object with `tsconfigPath` the path to your `tsconfig.json` file.
```js [eslint.config.mjs]
import { createConfigForNuxt } from '@nuxt/eslint-config'

export default createConfigForNuxt({
  features: {
    typescript: {
      tsconfigPath: './tsconfig.json'
    }
  }
})
```
