0
# Project Configuration
1

2
Factory function for configuring Vue project-specific options like script language support, type checking behavior, and parser settings for optimal performance and accuracy.
3

4
## Capabilities
5

6
### configureVueProject Function
7

8
Configures global Vue project settings that affect how ESLint processes Vue files and applies TypeScript rules.
9

10
```typescript { .api }
11
/**
12
 * Configure Vue project-specific options globally
13
 * Must be called before defineConfigWithVueTs to take effect
14
 * @param userOptions - Project configuration options
15
 */
16
function configureVueProject(userOptions: ProjectOptions): void;
17

18
interface ProjectOptions {
19
  /** 
20
   * Whether to parse TypeScript syntax in Vue templates
21
   * Defaults to `true`
22
   * Setting to `false` improves performance but disables TS syntax in templates
23
   */
24
  tsSyntaxInTemplates?: boolean;
25

26
  /** 
27
   * Allowed script languages in `vue` files
28
   * Defaults to `['ts']`
29
   */
30
  scriptLangs?: ScriptLang[];
31

32
  /** 
33
   * Whether to override some `no-unsafe-*` rules to avoid false positives on Vue component operations
34
   * Defaults to `true`
35
   * Set to `false` for stricter type checking in TSX-only or metaframework projects
36
   */
37
  allowComponentTypeUnsafety?: boolean;
38

39
  /** 
40
   * The root directory of the project
41
   * Defaults to `process.cwd()`
42
   */
43
  rootDir?: string;
44
}
45

46
type ScriptLang = "ts" | "tsx" | "js" | "jsx";
47
```
48

49
**Usage Examples:**
50

51
```typescript
52
import { 
53
  configureVueProject, 
54
  defineConfigWithVueTs, 
55
  vueTsConfigs 
56
} from "@vue/eslint-config-typescript";
57

58
// Basic configuration - TypeScript only
59
configureVueProject({
60
  tsSyntaxInTemplates: true,
61
  scriptLangs: ["ts"],
62
  allowComponentTypeUnsafety: true,
63
});
64

65
export default defineConfigWithVueTs(vueTsConfigs.recommended);
66

67
// Advanced configuration - Multiple script languages
68
configureVueProject({
69
  tsSyntaxInTemplates: false, // Better performance
70
  scriptLangs: ["ts", "js"], // Allow both TS and JS
71
  allowComponentTypeUnsafety: true,
72
  rootDir: __dirname,
73
});
74

75
export default defineConfigWithVueTs(vueTsConfigs.strictTypeChecked);
76

77
// Strict TypeScript-only setup
78
configureVueProject({
79
  tsSyntaxInTemplates: true,
80
  scriptLangs: ["ts"], // Only TypeScript
81
  allowComponentTypeUnsafety: false, // Strict type checking
82
  rootDir: process.cwd(),
83
});
84

85
export default defineConfigWithVueTs(vueTsConfigs.strictTypeChecked);
86
```
87

88
### Configuration Options
89

90
#### tsSyntaxInTemplates
91

92
Controls whether TypeScript syntax is parsed in Vue templates.
93

94
```typescript
95
// Enable TypeScript in templates (default)
96
configureVueProject({
97
  tsSyntaxInTemplates: true,
98
});
99

100
// This allows TypeScript syntax in templates:
101
// <template>
102
//   <div>{{ (user as User).name }}</div>
103
//   <MyComponent :prop="someValue!" />
104
// </template>
105

106
// Disable for better performance
107
configureVueProject({
108
  tsSyntaxInTemplates: false,
109
});
110
```
111

112
**Trade-offs:**
113
- `true`: Full TypeScript support in templates, type-aware rules work on template expressions
114
- `false`: Better performance, but TypeScript syntax in templates will cause parse errors
115

116
#### scriptLangs
117

118
Specifies which script languages are allowed in Vue single-file components.
119

120
```typescript
121
// TypeScript only (recommended)
122
configureVueProject({
123
  scriptLangs: ["ts"],
124
});
125

126
// Allow JavaScript (may cause false positives)
127
configureVueProject({
128
  scriptLangs: ["ts", "js"],
129
});
130

131
// Allow JSX/TSX (strongly discouraged - conflicts with type-aware rules)
132
configureVueProject({
133
  scriptLangs: ["ts", "tsx", "js", "jsx"],
134
});
135
```
136

137
**Script Language Support:**
138

139
- **`"ts"`**: TypeScript - Recommended, full type checking support
140
- **`"js"`**: JavaScript - Requires `allowJs` and `checkJs` in tsconfig.json
141
- **`"tsx"`**: TypeScript with JSX - Conflicts with type-aware rules
142
- **`"jsx"`**: JavaScript with JSX - May cause false positives
143

144
#### allowComponentTypeUnsafety
145

146
Controls whether to override `no-unsafe-*` rules for Vue component operations.
147

148
```typescript
149
// Allow Vue component type patterns (default)
150
configureVueProject({
151
  allowComponentTypeUnsafety: true,
152
});
153

154
// This allows patterns like:
155
// createApp(App)
156
// useTemplateRef()
157
// createRouter({ ... })
158

159
// Strict type checking (for TSX-only or metaframework projects)
160
configureVueProject({
161
  allowComponentTypeUnsafety: false,
162
});
163
```
164

165
**When to use `false`:**
166
- TSX-only projects without Vue SFCs
167
- Metaframeworks (Nuxt, Quasar) that handle app creation
168
- Projects where you don't directly interact with Vue component types
169

170
#### rootDir
171

172
Specifies the project root directory for file discovery and type checking setup.
173

174
```typescript
175
// Default - current working directory
176
configureVueProject({
177
  rootDir: process.cwd(),
178
});
179

180
// Custom root directory
181
configureVueProject({
182
  rootDir: "/path/to/project/root",
183
});
184

185
// Relative to current file
186
configureVueProject({
187
  rootDir: __dirname,
188
});
189
```
190

191
### Internal Processing
192

193
The configuration affects several internal processes:
194

195
#### Vue File Categorization
196

197
Based on `scriptLangs` and file content analysis:
198

199
```typescript
200
// Files are categorized as:
201
type VueFilesByGroup = {
202
  typeCheckable: string[];    // .vue files with <script lang="ts">
203
  nonTypeCheckable: string[]; // .vue files with other script languages
204
};
205
```
206

207
#### Parser Configuration
208

209
Script language settings determine parser selection:
210

211
```typescript
212
// Parser mapping based on scriptLangs
213
const parser = {
214
  js: "espree",           // For JavaScript files
215
  jsx: "espree",          // For JSX files  
216
  ts: tseslint.parser,    // For TypeScript files
217
  tsx: tseslint.parser,   // For TSX files
218
};
219
```
220

221
#### Rule Application
222

223
Configuration affects which rules are applied:
224

225
- Type-aware rules only apply to `typeCheckable` Vue files
226
- Performance optimizations skip type checking for `nonTypeCheckable` files
227
- `no-unsafe-*` rule overrides are applied based on `allowComponentTypeUnsafety`
228

229
### Best Practices
230

231
#### Performance Optimization
232

233
```typescript
234
// For large projects - disable TS in templates if not needed
235
configureVueProject({
236
  tsSyntaxInTemplates: false,
237
  scriptLangs: ["ts"],
238
});
239
```
240

241
#### Type Safety
242

243
```typescript
244
// Maximum type safety
245
configureVueProject({
246
  tsSyntaxInTemplates: true,
247
  scriptLangs: ["ts"], // TypeScript only
248
  allowComponentTypeUnsafety: false, // If applicable to your project
249
});
250
```
251

252
#### Migration from JavaScript
253

254
```typescript
255
// Gradual migration approach
256
configureVueProject({
257
  tsSyntaxInTemplates: false, // Start with false, enable later
258
  scriptLangs: ["ts", "js"], // Allow both during migration
259
  allowComponentTypeUnsafety: true,
260
});
261
```