Packages

@nuxt/eslint-config

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

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

We recommand to use directly the ESLint Module that will provide project-aware ESLint config and Nuxt DevTools integration on top of this config.
Source code on GitHub

Config Formats

This package provides two different ESLint configs:

Flat Config Format

The flat config format is the future of ESLint and is designed to be more flexible and project-aware. The entry @nuxt/eslint-config/flat provides a factory function to create a project-aware ESLint config for Nuxt 3 projects. It is unopinionated by default but customizable by passing options to the factory function. Used by @nuxt/eslint module to generate project-aware ESLint config.

  1. Install this package and eslint in your devDependencies.
yarn add --dev @nuxt/eslint-config eslint
  1. Import the config factory function from @nuxt/eslint-config/flat entry in your eslint.config.mjs:
eslint.config.mjs
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

export default createConfigForNuxt({
  // options here
})

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

package.json
{
  "scripts": {
    "lint": "eslint ."
  }
}

Customizing the Config

Note that createConfigForNuxt() returns a chainable FlatConfigComposer instance from 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:

eslint.config.mjs
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

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: {
      // ...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:

This feature is experimental and may change in the future.
eslint.config.mjs
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

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:

eslint.config.mjs
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

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

Legacy Config Format

The legacy config configures TypeScript and Vue integration for ESLint. It is unopinionated and static, and does not contains stylistic rules or project-aware settings.

  1. Install this package and eslint in your devDependencies.
yarn add --dev @nuxt/eslint-config eslint
  1. Extend the default Nuxt config by creating an .eslintrc.cjs:
.eslintrc.cjs
module.exports = {
  root: true,
  extends: ["@nuxt/eslint-config"],
};

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

package.json
{
  "scripts": {
    "lint": "eslint ."
  }
}

ESLint Stylistic

Similar to the ESLint Module, you can opt-in by setting stylistic to true in the features module options.

eslint.config.mjs
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'

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

Learn more about all the available options in the ESLint Stylistic documentation.