Nuxt ESLint is a collection of packages designed to provide project-aware, easy-to-use, extensible, and future-proof ESLint integrations for Nuxt projects. It is split into three primary packages depending on your integration needs:

• @nuxt/eslint: A Nuxt module that generates a project-aware ESLint configuration automatically.
• @nuxt/eslint-config: A static ESLint configuration package.
• @nuxt/eslint-plugin: An ESLint plugin providing specific linting rules for Nuxt.

The @nuxt/eslint-plugin provides additional ESLint rules specifically for Nuxt projects.

Note: In most cases, you do not need to install or use this package directly. It is automatically included when you use the ESLint Module or the ESLint Config.

The @nuxtjs/eslint-config-typescript package provides a TypeScript-compatible version of the legacy @nuxtjs/eslint-config specifically designed for Nuxt 2 projects.

Important Compatibility Notes:

• Nuxt 3: Do not use this package for Nuxt 3 projects. Instead, use @nuxt/eslint.
• Maintenance Status: This package is in maintenance mode and no longer receives active development.

If your Nuxt 2 project uses TypeScript, use the @nuxtjs/eslint-config-typescript package instead of the standard config. This allows you to use both Nuxt-specific rules and TypeScript-specific rules. You can override rules in your .eslintrc file as usual.

{
  "extends": ["@nuxtjs/eslint-config-typescript"]
}

Use @nuxtjs/eslint-config to apply an opinionated ESLint configuration to Nuxt 2 projects.

Warning: This package is in maintenance mode and is intended specifically for Nuxt 2. For Nuxt 3 projects, use @nuxt/eslint instead.

# 1. Add the config package
npm i -D @nuxtjs/eslint-config

# 2. Ensure eslint is installed
npm i -D eslint

3. Create a .eslintrc file and extend the config

{
  "extends": ["@nuxtjs/eslint-config"]
}

Nuxt ESLint provides different packages depending on your project type and configuration format.

• For new projects (Recommended): Use the @nuxt/eslint module. It provides project-aware ESLint flat config generation and is the most future-proof option.
• For legacy .eslintrc projects: Use the @nuxt/eslint-config package to manually configure your settings. It is unopinionated and customizable.
• For custom low-level setups: Use the @nuxt/eslint-plugin package directly if you want to enable Nuxt-specific rules within your own custom ESLint configuration.

To quickly add ESLint integration to your Nuxt project, run the following command:

npx nuxi module add eslint

Once the Nuxt app starts, a eslint.config.mjs file will be generated in your project root.

Note for TypeScript users: You must have typescript installed in your project.

npm install -D typescript

To use the shared ESLint configuration for Nuxt projects, install @nuxt/eslint-config and eslint as development dependencies. Then, use the createConfigForNuxt factory function in your eslint.config.mjs file to generate a project-aware configuration. It is recommended to use the ESLint Module instead for better project awareness and Nuxt DevTools integration.

npm install --save-dev @nuxt/eslint-config eslint

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

export default createConfigForNuxt({
  // options here
})

To start the documentation site in development mode, run the dev script.

npm run dev