0
# Config Generation
1

2
Automatic ESLint configuration generation based on Nuxt project structure and settings. The module analyzes your Nuxt project and generates a comprehensive ESLint flat configuration file that understands your project's structure, imports, and components.
3

4
## Capabilities
5

6
### Config Generation Options
7

8
Configuration options for ESLint config generation functionality.
9

10
```typescript { .api }
11
/**
12
 * Configuration options for ESLint config generation
13
 * Extends NuxtESLintFeaturesOptions from @nuxt/eslint-config/flat
14
 */
15
interface ConfigGenOptions extends NuxtESLintFeaturesOptions {
16
  /**
17
   * File path to the generated ESLint config
18
   * @default '.nuxt/eslint.config.mjs'
19
   */
20
  configFile?: string;
21

22
  /**
23
   * Create `eslint.config.mjs` file automatically if not exists
24
   * @default true
25
   */
26
  autoInit?: boolean;
27

28
  /**
29
   * Override rootDir for the generated ESLint config
30
   * If you generate ESLint config from a different directory, you can set this option
31
   * @default nuxt.options.rootDir
32
   */
33
  rootDir?: string;
34

35
  /**
36
   * Options for DevTools integration
37
   */
38
  devtools?: DevToolsOptions;
39
}
40

41
/**
42
 * DevTools integration options for ESLint config inspector
43
 */
44
interface DevToolsOptions {
45
  /**
46
   * Enable ESLint config inspector in DevTools
47
   * @default 'lazy'
48
   */
49
  enabled?: boolean | 'lazy';
50
  
51
  /**
52
   * Port for the ESLint config inspector
53
   * Will auto-detect available port if not specified
54
   */
55
  port?: number;
56
}
57
```
58

59
### Generated Config Structure
60

61
The generated ESLint config includes comprehensive project-aware settings.
62

63
```typescript { .api }
64
/**
65
 * Structure of the generated ESLint configuration
66
 * Generated at the specified configFile location
67
 */
68
interface GeneratedConfig {
69
  /** ESLint flat configuration options resolved from Nuxt project */
70
  options: NuxtESLintConfigOptionsResolved;
71
  
72
  /** Pre-configured ESLint rules for Nuxt projects */
73
  configs: FlatConfigComposer;
74
  
75
  /** Main function for extending with custom configurations */
76
  withNuxt: typeof defineFlatConfigs;
77
  
78
  /** Re-exported utility for defining flat configs */
79
  defineFlatConfigs: typeof defineFlatConfigs;
80
}
81
```
82

83
The generated `.nuxt/eslint.config.mjs` file exports these functions and objects:
84

85
```typescript { .api }
86
// Main exported functions from generated config
87
declare function defineFlatConfigs(...configs: any[]): any[];
88
declare function withNuxt(...configs: any[]): any[];
89

90
// Main exports available in generated .nuxt/eslint.config.mjs
91
export const options: NuxtESLintConfigOptionsResolved;
92
export const configs: FlatConfigComposer;
93
export const withNuxt: typeof defineFlatConfigs;
94
export const defineFlatConfigs: typeof defineFlatConfigs;
95
```
96

97
**Usage Examples:**
98

99
```typescript
100
// Basic config generation
101
export default defineNuxtConfig({
102
  modules: ['@nuxt/eslint'],
103
  eslint: {
104
    config: true
105
  }
106
})
107

108
// Custom config file location
109
export default defineNuxtConfig({
110
  modules: ['@nuxt/eslint'],
111
  eslint: {
112
    config: {
113
      configFile: 'eslint/nuxt.config.mjs',
114
      autoInit: false
115
    }
116
  }
117
})
118

119
// DevTools integration settings
120
export default defineNuxtConfig({
121
  modules: ['@nuxt/eslint'],
122
  eslint: {
123
    config: {
124
      devtools: {
125
        enabled: true,
126
        port: 8080
127
      }
128
    }
129
  }
130
})
131
```
132

133
### Project Structure Analysis
134

135
The config generation analyzes your Nuxt project structure to create appropriate ESLint rules.
136

137
```typescript { .api }
138
/**
139
 * Directory structure analysis for ESLint configuration
140
 * Automatically detects Nuxt project layout and conventions
141
 */
142
interface NuxtProjectDirs {
143
  /** Root directory paths */
144
  root: string[];
145
  /** Source directory paths */
146
  src: string[];
147
  /** Pages directory paths */
148
  pages: string[];
149
  /** Components directory paths */
150
  components: string[];
151
  /** Components with prefixes */
152
  componentsPrefixed: string[];
153
  /** Composables directory paths */
154
  composables: string[];
155
  /** Layouts directory paths */
156
  layouts: string[];
157
  /** Plugins directory paths */
158
  plugins: string[];
159
  /** Middleware directory paths */
160
  middleware: string[];
161
  /** Modules directory paths */
162
  modules: string[];
163
  /** Server directory paths */
164
  servers: string[];
165
}
166
```
167

168
### Auto-initialization
169

170
When `autoInit` is enabled, the module automatically creates a root ESLint config file.
171

172
```typescript { .api }
173
/**
174
 * Auto-initialization creates eslint.config.mjs if it doesn't exist
175
 * Only runs if no existing flat config files are found
176
 */
177
function initRootESLintConfig(
178
  nuxt: Nuxt, 
179
  generateConfigPath: string
180
): Promise<void>;
181
```
182

183
The auto-generated root config looks like:
184

185
```javascript
186
// @ts-check
187
import withNuxt from './.nuxt/eslint.config.mjs'
188

189
export default withNuxt(
190
  // Your custom configs here
191
)
192
```
193

194
### Global Variables Integration
195

196
The generated config automatically includes global variables from your import registry.
197

198
```typescript { .api }
199
/**
200
 * Addon for integrating Nuxt import globals into ESLint config
201
 */
202
interface ImportGlobalsAddon extends ESLintConfigGenAddon {
203
  name: 'nuxt:eslint:import-globals';
204
  getConfigs(): Promise<ESLintConfigGenAddonResult>;
205
}
206
```
207

208
## Generation Process
209

210
1. **Analysis**: Project structure is analyzed to identify directories and conventions
211
2. **Import Collection**: Auto-imports and composables are catalogued for global variables
212
3. **Config Building**: ESLint flat config is constructed with project-aware rules
213
4. **File Writing**: Generated config is written to the specified location
214
5. **Type Generation**: TypeScript declarations are generated for ESLint rules
215
6. **Auto-init**: Root config file is created if enabled and not present
216

217
## DevTools Integration
218

219
The config generation includes optional integration with Nuxt DevTools for visual config inspection:
220

221
- **Lazy Loading**: ESLint config inspector starts when first accessed
222
- **Immediate Loading**: Inspector starts with the dev server
223
- **Port Management**: Automatic port detection or manual configuration
224
- **Visual Interface**: Web-based interface for exploring ESLint configuration
225

226
## Extensibility
227

228
The config generation supports extension through addons and hooks:
229

230
- **Hook System**: `eslint:config:addons` hook for registering custom addons
231
- **Addon Interface**: Structured way to add imports and configuration blocks
232
- **Merge Strategy**: Custom configurations are merged with generated base config