0
# UI Library Resolvers
1

2
Pre-built resolvers for popular Vue UI libraries including Element Plus, Ant Design Vue, Vuetify, Quasar, and many others. These resolvers handle component imports and style loading automatically.
3

4
## Capabilities
5

6
### Element Plus Resolver
7

8
Resolver for Element Plus components with automatic style importing and SSR support.
9

10
```typescript { .api }
11
/**
12
 * Element Plus component resolver
13
 * @param options - Element Plus resolver configuration
14
 * @returns Component resolver for Element Plus
15
 */
16
function ElementPlusResolver(options?: ElementPlusResolverOptions): ComponentResolver;
17

18
interface ElementPlusResolverOptions {
19
  /** Import style css or sass with components */
20
  importStyle?: boolean | "css" | "sass";
21
  /** Use commonjs lib & source css or scss for ssr */
22
  ssr?: boolean;
23
  /** Specify element-plus version to load style */
24
  version?: string;
25
  /** Auto import for directives */
26
  directives?: boolean;
27
  /** Exclude component name, if match do not resolve the name */
28
  exclude?: RegExp;
29
  /** A list of component names that have no styles */
30
  noStylesComponents?: string[];
31
  /** Nightly version */
32
  nightly?: boolean;
33
}
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
// Basic usage
40
Components({
41
  resolvers: [ElementPlusResolver()],
42
});
43

44
// With style importing
45
Components({
46
  resolvers: [
47
    ElementPlusResolver({
48
      importStyle: "sass", // or 'css' or false
49
      directives: true,
50
    }),
51
  ],
52
});
53

54
// SSR configuration
55
Components({
56
  resolvers: [
57
    ElementPlusResolver({
58
      ssr: true,
59
      importStyle: "css",
60
    }),
61
  ],
62
});
63
```
64

65
### Element UI Resolver
66

67
Resolver for Element UI (Vue 2) components with automatic style importing.
68

69
```typescript { .api }
70
/**
71
 * Element UI component resolver for Vue 2
72
 * @param options - Element UI resolver configuration
73
 * @returns Component resolver for Element UI
74
 */
75
function ElementUiResolver(options?: ElementUiResolverOptions): ComponentResolver;
76

77
interface ElementUiResolverOptions {
78
  /** Import style css or sass with components */
79
  importStyle?: boolean | "css" | "sass";
80
  /** Exclude component name patterns */
81
  exclude?: RegExp;
82
}
83
```
84

85
**Usage Examples:**
86

87
```typescript
88
// Basic usage (Vue 2 projects)
89
Components({
90
  resolvers: [ElementUiResolver()],
91
});
92

93
// With Sass styles
94
Components({
95
  resolvers: [
96
    ElementUiResolver({
97
      importStyle: "sass",
98
    }),
99
  ],
100
});
101

102
// Without styles
103
Components({
104
  resolvers: [
105
    ElementUiResolver({
106
      importStyle: false,
107
    }),
108
  ],
109
});
110
```
111

112
### Ant Design Vue Resolver
113

114
Resolver for Ant Design Vue components with customizable style importing.
115

116
```typescript { .api }
117
/**
118
 * Ant Design Vue component resolver
119
 * @param options - Ant Design Vue resolver configuration
120
 * @returns Component resolver for Ant Design Vue
121
 */
122
function AntDesignVueResolver(options?: AntDesignVueResolverOptions): ComponentResolver;
123

124
interface AntDesignVueResolverOptions {
125
  /** Import style css or less with components */
126
  importStyle?: boolean | "css" | "less";
127
  /** Resolve icon components */
128
  resolveIcons?: boolean;
129
  /** Import CSS files for components */
130
  importCss?: boolean;
131
  /** Import Less files for components */
132
  importLess?: boolean;
133
  /** Exclude component name patterns */
134
  exclude?: string[];
135
}
136
```
137

138
**Usage Examples:**
139

140
```typescript
141
// Basic usage
142
Components({
143
  resolvers: [AntDesignVueResolver()],
144
});
145

146
// With Less styles and icons
147
Components({
148
  resolvers: [
149
    AntDesignVueResolver({
150
      importStyle: "less",
151
      resolveIcons: true,
152
    }),
153
  ],
154
});
155
```
156

157
### Vuetify Resolver
158

159
Resolver for Vuetify components with automatic style and labs component support.
160

161
```typescript { .api }
162
/**
163
 * Vuetify component resolver
164
 * @param options - Vuetify resolver configuration
165
 * @returns Component resolver for Vuetify
166
 */
167
function VuetifyResolver(options?: VuetifyResolverOptions): ComponentResolver;
168

169
interface VuetifyResolverOptions {
170
  /** Import styles */
171
  styles?: boolean;
172
  /** Include Vuetify labs components */
173
  labs?: boolean;
174
  /** Custom theme configuration */
175
  theme?: Record<string, any>;
176
}
177
```
178

179
**Usage Examples:**
180

181
```typescript
182
Components({
183
  resolvers: [
184
    VuetifyResolver({
185
      styles: true,
186
      labs: true,
187
    }),
188
  ],
189
});
190
```
191

192
### Quasar Resolver
193

194
Resolver for Quasar Framework components with automatic importing.
195

196
```typescript { .api }
197
/**
198
 * Quasar component resolver
199
 * @param options - Quasar resolver configuration
200
 * @returns Component resolver for Quasar
201
 */
202
function QuasarResolver(options?: QuasarResolverOptions): ComponentResolver;
203

204
interface QuasarResolverOptions {
205
  /** Import Quasar styles */
206
  importStyle?: boolean;
207
  /** Auto-import Quasar directives */
208
  autoImportComponentCase?: "camel" | "pascal" | "kebab";
209
}
210
```
211

212
### Naive UI Resolver
213

214
Resolver for Naive UI components with tree-shaking support.
215

216
```typescript { .api }
217
/**
218
 * Naive UI component resolver
219
 * @param options - Naive UI resolver configuration
220
 * @returns Component resolver for Naive UI
221
 */
222
function NaiveUiResolver(options?: NaiveUiResolverOptions): ComponentResolver;
223

224
interface NaiveUiResolverOptions {
225
  /** Import styles */
226
  importStyle?: boolean;
227
}
228
```
229

230
### Prime Vue Resolver
231

232
Resolver for PrimeVue components with theme and style support.
233

234
```typescript { .api }
235
/**
236
 * PrimeVue component resolver
237
 * @param options - PrimeVue resolver configuration
238
 * @returns Component resolver for PrimeVue
239
 */
240
function PrimeVueResolver(options?: PrimeVueResolverOptions): ComponentResolver;
241

242
interface PrimeVueResolverOptions {
243
  /** Import component styles */
244
  importStyle?: boolean;
245
  /** Import theme styles */
246
  importTheme?: boolean;
247
  /** PrimeVue prefix */
248
  prefix?: string;
249
}
250
```
251

252
### Arco Design Resolver
253

254
Resolver for Arco Design Vue components.
255

256
```typescript { .api }
257
/**
258
 * Arco Design Vue component resolver
259
 * @param options - Arco resolver configuration
260
 * @returns Component resolver for Arco Design Vue
261
 */
262
function ArcoResolver(options?: ArcoResolverOptions): ComponentResolver;
263

264
interface ArcoResolverOptions {
265
  /** Import component styles */
266
  importStyle?: boolean | "css" | "less";
267
  /** Import icon components */
268
  resolveIcons?: boolean;
269
  /** Component library prefix */
270
  prefix?: string;
271
}
272
```
273

274
### Mobile UI Library Resolvers
275

276
Resolvers for mobile-focused Vue UI libraries.
277

278
```typescript { .api }
279
/**
280
 * Vant mobile UI resolver
281
 */
282
function VantResolver(options?: VantResolverOptions): ComponentResolver;
283

284
/**
285
 * Varlet UI mobile resolver
286
 */
287
function VarletUIResolver(options?: VarletUIResolverOptions): ComponentResolver;
288

289
/**
290
 * Ionic Vue resolver
291
 */
292
function IonicResolver(options?: IonicResolverOptions): ComponentResolver;
293

294
interface VantResolverOptions {
295
  /** Import component styles */
296
  importStyle?: boolean;
297
}
298

299
interface VarletUIResolverOptions {
300
  /** Import component styles */
301
  importStyle?: boolean;
302
  /** Auto import directives */
303
  directives?: boolean;
304
}
305

306
interface IonicResolverOptions {
307
  /** Import Ionic styles */
308
  importStyle?: boolean;
309
}
310
```
311

312
### Additional UI Library Resolvers
313

314
Support for many other popular Vue UI libraries.
315

316
```typescript { .api }
317
/**
318
 * TDesign Vue resolver
319
 */
320
function TDesignResolver(options?: TDesignResolverOptions): ComponentResolver;
321

322
/**
323
 * DevUI resolver
324
 */
325
function DevUiResolver(): ComponentResolver;
326

327
/**
328
 * View UI resolver
329
 */
330
function ViewUiResolver(options?: ViewUiResolverOptions): ComponentResolver;
331

332
/**
333
 * Bootstrap Vue resolver
334
 */
335
function BootstrapVueResolver(): ComponentResolver;
336

337
/**
338
 * Headless UI resolver
339
 */
340
function HeadlessUiResolver(options?: HeadlessUiResolverOptions): ComponentResolver;
341

342
/**
343
 * Inkline resolver
344
 */
345
function InklineResolver(): ComponentResolver;
346

347
/**
348
 * VEUI resolver
349
 */
350
function VeuiResolver(options?: VeuiResolverOptions): ComponentResolver;
351

352
/**
353
 * Layui Vue resolver
354
 */
355
function LayuiVueResolver(): ComponentResolver;
356

357
/**
358
 * IduxResolver
359
 */
360
function IduxResolver(options?: IduxResolverOptions): ComponentResolver;
361
```
362

363
### VueUse Resolvers
364

365
Special resolvers for VueUse composables and components.
366

367
```typescript { .api }
368
/**
369
 * VueUse components resolver
370
 * @param options - VueUse resolver configuration
371
 * @returns Component resolver for VueUse components
372
 */
373
function VueUseComponentsResolver(options?: VueUseResolverOptions): ComponentResolver;
374

375
/**
376
 * VueUse directives resolver
377
 * @param options - VueUse directives configuration
378
 * @returns Directive resolver for VueUse directives
379
 */
380
function VueUseDirectiveResolver(options?: VueUseDirectiveResolverOptions): ComponentResolver;
381

382
interface VueUseResolverOptions {
383
  /** Import styles */
384
  importStyle?: boolean;
385
}
386

387
interface VueUseDirectiveResolverOptions {
388
  /** Auto import VueUse directives */
389
  importDirectives?: boolean;
390
}
391
```
392

393
### Multiple Resolvers
394

395
Using multiple UI library resolvers together.
396

397
**Usage Examples:**
398

399
```typescript
400
// Multiple UI libraries
401
Components({
402
  resolvers: [
403
    // Desktop UI
404
    ElementPlusResolver({
405
      importStyle: "sass",
406
    }),
407
    AntDesignVueResolver({
408
      importStyle: "less",
409
    }),
410
    
411
    // Mobile UI
412
    VantResolver({
413
      importStyle: true,
414
    }),
415
    
416
    // Utility libraries
417
    VueUseComponentsResolver(),
418
    VueUseDirectiveResolver(),
419
    
420
    // Custom resolver as fallback
421
    (name: string) => {
422
      if (name.startsWith("Custom")) {
423
        return { name, from: `@/components/${name}.vue` };
424
      }
425
    },
426
  ],
427
});
428
```
429

430
### Resolver Configuration Patterns
431

432
Common patterns for configuring UI library resolvers.
433

434
**Usage Examples:**
435

436
```typescript
437
// Environment-based configuration
438
const isDev = process.env.NODE_ENV === "development";
439

440
Components({
441
  resolvers: [
442
    ElementPlusResolver({
443
      importStyle: isDev ? "sass" : "css", // Use Sass in dev, CSS in prod
444
      directives: true,
445
    }),
446
  ],
447
});
448

449
// Conditional resolvers based on features
450
const resolvers = [
451
  ElementPlusResolver(),
452
];
453

454
// Add mobile resolver for mobile app
455
if (process.env.MOBILE_APP) {
456
  resolvers.push(VantResolver());
457
}
458

459
Components({ resolvers });
460

461
// Themed configuration
462
Components({
463
  resolvers: [
464
    AntDesignVueResolver({
465
      importStyle: "less", // Required for theme customization
466
    }),
467
    PrimeVueResolver({
468
      importTheme: true,
469
      prefix: "P", // PButton, PCard, etc.
470
    }),
471
  ],
472
});
473
```
474

475
### Style Import Strategies
476

477
Different approaches to importing component styles.
478

479
**Usage Examples:**
480

481
```typescript
482
// No styles (manual import)
483
Components({
484
  resolvers: [
485
    ElementPlusResolver({
486
      importStyle: false, // Import styles manually in main.ts
487
    }),
488
  ],
489
});
490

491
// CSS imports (smaller bundle)
492
Components({
493
  resolvers: [
494
    ElementPlusResolver({
495
      importStyle: "css", // Import pre-compiled CSS
496
    }),
497
  ],
498
});
499

500
// Sass/Less imports (customizable)
501
Components({
502
  resolvers: [
503
    ElementPlusResolver({
504
      importStyle: "sass", // Import source Sass for customization
505
    }),
506
    AntDesignVueResolver({
507
      importStyle: "less", // Import source Less for theming
508
    }),
509
  ],
510
});
511
```