---
title: "@nuxt/eslint-config"
description: "Shared, unopinionated but customizable ESLint flat config for Nuxt projects."
canonical_url: "https://nuxt.com/modules/eslint/config"
---
# @nuxt/eslint-config

> Shared, unopinionated but customizable ESLint flat config for Nuxt projects.

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

::tip
We recommand to use directly the [ESLint Module](https://nuxt.com/modules/eslint) that will provide project-aware ESLint config and Nuxt DevTools integration on top of this config.
::

::note
The source code of this package is in [`packages/eslint-config`](https://github.com/nuxt/eslint/tree/main/packages/eslint-config) on GitHub.
::

## Configurations

Since v1.0, this package only provides the flat config format and requires ESLint v9 or v10. 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`](https://nuxt.com/modules/eslint) 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/no-explicit-any': '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.

You can also pass your custom flat configs as extra arguments, they are appended after the Nuxt configs:

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

export default createConfigForNuxt(
  {
    // options here
  },
  // ...your custom flat configs
)
```

### Module Authors

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

::warning
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://nuxt.com/modules/eslint/recipes#eslint-stylistic), you can opt in by setting `stylistic` to `true` in the `features` 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

TypeScript support is enabled automatically when `typescript` is installed in your project. 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'
    }
  }
})
```

The TypeScript rules use the strict preset by default. Set `features.typescript.strict` to `false` to use the recommended preset only, or `features.typescript` to `false` to disable TypeScript support.

## Formatters

To also format CSS, HTML, GraphQL and other files with ESLint, set `features.formatters` to `true` or to an object picking the file types. It requires [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format) to be installed. See the [Formatters recipe](https://nuxt.com/modules/eslint/recipes#formatters) for the details.

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

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

## Import Plugin

The import rules use [`eslint-plugin-import-x`](https://github.com/un-ts/eslint-plugin-import-x) by default. You can switch to the lighter [`eslint-plugin-import-lite`](https://github.com/9romise/eslint-plugin-import-lite) with `features.import.package`, or disable the import rules with `features.import: false`:

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

export default createConfigForNuxt({
  features: {
    import: {
      package: 'eslint-plugin-import-lite'
    }
  }
})
```

## Nuxt Config Keys Order

When `features.stylistic` is enabled, the keys of your `nuxt.config` are sorted in a recommended order by the [`nuxt/nuxt-config-keys-order`](https://nuxt.com/modules/eslint/plugin#nuxtnuxt-config-keys-order) rule. You can turn it on or off independently with `features.nuxt.sortConfigKeys`:

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

export default createConfigForNuxt({
  features: {
    nuxt: {
      sortConfigKeys: false
    }
  }
})
```

## Custom Config Presets

Like the [ESLint Module](https://nuxt.com/modules/eslint/recipes#custom-config-presets), set `features.standalone` to `false` to only include the Nuxt-specific rules, without the JavaScript, TypeScript, Vue and import setup, when you combine it with another config preset.

## Directories

Without the module, the config cannot read your Nuxt project structure. It assumes your source code is in the project root or in `app/`, following both the Nuxt 3 and Nuxt 4 conventions, and derives the directories of pages, layouts, components and others from it. Use `dirs` to match your project when it differs:

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

export default createConfigForNuxt({
  dirs: {
    src: ['./src'],
    // Components that are registered with a prefix, so `vue/multi-word-component-names` is not reported
    componentsPrefixed: ['./src/components/prefixed']
  }
})
```


## Sitemap

See the full [sitemap](https://nuxt.com/sitemap.md) for all pages.