0
# @nuxt/eslint-config
1

2
@nuxt/eslint-config is a comprehensive ESLint configuration package specifically designed for Nuxt 3 projects. It provides a shared, unopinionated-by-default yet highly customizable ESLint setup that integrates seamlessly with Nuxt's development workflow. The configuration supports TypeScript, Vue.js components, modern JavaScript features, and various code quality tools through an extensive plugin ecosystem.
3

4
## Package Information
5

6
- **Package Name**: @nuxt/eslint-config
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @nuxt/eslint-config`
10

11
## Core Imports
12

13
```typescript
14
import { createConfigForNuxt, defineFlatConfigs, resolveOptions } from "@nuxt/eslint-config";
15
```
16

17
For types and interfaces:
18

19
```typescript
20
import type { 
21
  NuxtESLintConfigOptions, 
22
  NuxtESLintFeaturesOptions,
23
  ToolingOptions,
24
  OptionsFormatters 
25
} from "@nuxt/eslint-config";
26
```
27

28
For flat config (ESLint 9+):
29

30
```typescript
31
import { createConfigForNuxt } from "@nuxt/eslint-config/flat";
32
```
33

34
CommonJS:
35

36
```javascript
37
const { createConfigForNuxt, defineFlatConfigs, resolveOptions } = require("@nuxt/eslint-config");
38
```
39

40
## Basic Usage
41

42
```typescript
43
import { createConfigForNuxt } from "@nuxt/eslint-config";
44

45
// Basic configuration with defaults
46
export default createConfigForNuxt();
47

48
// With custom options
49
export default createConfigForNuxt({
50
  features: {
51
    typescript: true,
52
    stylistic: true,
53
    tooling: {
54
      jsdoc: true,
55
      unicorn: true,
56
      regexp: true
57
    }
58
  }
59
});
60

61
// With additional user configs
62
export default createConfigForNuxt(
63
  {
64
    features: {
65
      formatters: {
66
        css: true,
67
        html: true,
68
        markdown: "prettier"
69
      }
70
    }
71
  },
72
  // Custom rules
73
  {
74
    rules: {
75
      "no-console": "warn"
76
    }
77
  }
78
);
79

80
// Using resolveOptions for configuration inspection
81
import { resolveOptions } from "@nuxt/eslint-config";
82

83
const resolved = resolveOptions({
84
  features: { stylistic: true },
85
  dirs: { src: ["./src"] }
86
});
87
console.log(resolved.features.typescript); // Auto-detected
88
console.log(resolved.dirs.pages); // ["./src/pages"]
89
```
90

91
## Architecture
92

93
@nuxt/eslint-config is built around several key components:
94

95
- **Flat Config System**: Uses ESLint's modern flat configuration format with `FlatConfigComposer` for configuration management
96
- **Feature-based Configuration**: Modular system where features (TypeScript, Vue, stylistic rules, etc.) can be enabled/disabled independently
97
- **Async Config Loading**: Dynamic imports for optional plugins to reduce bundle size and improve performance
98
- **Directory-aware Rules**: Intelligent rule application based on Nuxt project structure (pages, components, layouts, etc.)
99
- **Plugin Ecosystem Integration**: Seamless integration with popular ESLint plugins for Vue, TypeScript, stylistic formatting, and tooling
100

101
## Capabilities
102

103
### Core Configuration
104

105
Primary function for creating Nuxt-optimized ESLint configurations with extensive customization options.
106

107
```typescript { .api }
108
function createConfigForNuxt(
109
  options?: NuxtESLintConfigOptions,
110
  ...userConfigs: ResolvableFlatConfig[]
111
): FlatConfigComposer;
112

113
interface NuxtESLintConfigOptions {
114
  features?: NuxtESLintFeaturesOptions;
115
  dirs?: DirectoriesConfig;
116
}
117

118
interface NuxtESLintFeaturesOptions {
119
  standalone?: boolean;
120
  tooling?: boolean | ToolingOptions;
121
  import?: boolean | ImportPluginOptions;
122
  stylistic?: boolean | StylisticCustomizeOptions;
123
  formatters?: boolean | OptionsFormatters;
124
  nuxt?: NuxtSpecificOptions;
125
  typescript?: boolean | TypeScriptOptions;
126
}
127
```
128

129
[Core Configuration](./core-configuration.md)
130

131
### Flat Config Utilities
132

133
Utilities for working with ESLint flat configurations and type-safe configuration composition.
134

135
```typescript { .api }
136
function defineFlatConfigs(...configs: ResolvableFlatConfig[]): FlatConfigComposer;
137

138
type ResolvableFlatConfig = Linter.Config | Promise<Linter.Config>;
139
```
140

141
[Flat Config Utilities](./flat-config-utilities.md)
142

143
### Configuration Options
144

145
Comprehensive type system for configuring all aspects of the ESLint setup, from feature toggles to directory structures.
146

147
```typescript { .api }
148
interface ToolingOptions {
149
  regexp?: boolean;
150
  unicorn?: boolean;
151
  jsdoc?: boolean;
152
}
153

154
interface OptionsFormatters {
155
  css?: 'prettier' | boolean;
156
  html?: 'prettier' | boolean;
157
  xml?: 'prettier' | boolean;
158
  svg?: 'prettier' | boolean;
159
  markdown?: 'prettier' | 'dprint' | boolean;
160
  graphql?: 'prettier' | boolean;
161
  prettierOptions?: any;
162
  dprintOptions?: boolean;
163
}
164
```
165

166
[Configuration Options](./configuration-options.md)
167

168
### Option Resolution
169

170
Core utility for resolving and normalizing configuration options with intelligent defaults.
171

172
```typescript { .api }
173
function resolveOptions(config: NuxtESLintConfigOptions): NuxtESLintConfigOptionsResolved;
174
```
175

176
[Utility Functions](./utility-functions.md)
177

178
## Types
179

180
```typescript { .api }
181
interface DirectoriesConfig {
182
  src?: string[];
183
  root?: string[];
184
  pages?: string[];
185
  layouts?: string[];
186
  components?: string[];
187
  componentsPrefixed?: string[];
188
  composables?: string[];
189
  plugins?: string[];
190
  modules?: string[];
191
  middleware?: string[];
192
  servers?: string[];
193
}
194

195
interface NuxtSpecificOptions {
196
  sortConfigKeys?: boolean;
197
}
198

199
interface ImportPluginOptions {
200
  package?: 'eslint-plugin-import-lite' | 'eslint-plugin-import-x';
201
}
202

203
interface TypeScriptOptions {
204
  strict?: boolean;
205
  tsconfigPath?: string;
206
}
207

208
interface NuxtESLintConfigOptionsResolved {
209
  features: Required<NotNill<NuxtESLintFeaturesOptions>>;
210
  dirs: Required<NotNill<DirectoriesConfig>>;
211
}
212

213
type NotNill<T> = T extends null | undefined ? never : T;
214
type Awaitable<T> = T | Promise<T>;
215
```