@nuxt/eslint

Introduction

All-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check alongside the dev server.

Features

• ESLint flat config, composable, customizable and future-proof.
• Project-aware Nuxt-specific settings, also supports layers.
• Nuxt DevTools integration powered by @eslint/config-inspector.
• Extensible with other modules.
• Optional dev server checker integration.

Quick Setup

Run the following command to add the @nuxt/eslint module to your project:

npx nuxt add eslint

Once you start your Nuxt app, a eslint.config.mjs file will be generated under your project root. You can customize it as needed.

yarn add --dev typescript

npm install -D typescript

pnpm add -D typescript

bun add -D typescript

Manual Setup

yarn add --dev @nuxt/eslint eslint typescript

npm install -D @nuxt/eslint eslint typescript

pnpm add -D @nuxt/eslint eslint typescript

bun add -D @nuxt/eslint eslint typescript

export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint'
  ],
  eslint: {
    // options here
  }
})

And create an eslint.config.mjs file under your project root, with the following content:

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // your custom flat configs go here, for example:
  // {
  //   files: ['**/*.ts', '**/*.tsx'],
  //   rules: {
  //     'no-console': 'off' // allow console.log in TypeScript files
  //   }
  // },
  // {
  //   ...
  // }
)

withNuxt will take the rest arguments of flat configs and append them after Nuxt flat config items. You can either use the Nuxt DevTools panel to inspect the resolved ESLint flat config, or manually run npx @eslint/config-inspector.