0
# Graphical Interface
1

2
Web-based project management interface providing visual tools for Vue CLI project creation, plugin management, and development workflow.
3

4
## Capabilities
5

6
### UI Command
7

8
Start the Vue CLI graphical user interface web application.
9

10
```bash { .api }
11
/**
12
 * Start and open the vue-cli ui
13
 * Launches a web-based interface for managing Vue CLI projects
14
 */
15
vue ui
16

17
Options:
18
  -H, --host <host>      Host used for the UI server (default: localhost)
19
  -p, --port <port>      Port used for the UI server (by default search for available port)
20
  -D, --dev              Run in dev mode
21
  --quiet                Don't output starting messages
22
  --headless             Don't open browser on start and output port
23
```
24

25
**Usage Examples:**
26

27
```bash
28
# Start UI with default settings (opens browser automatically)
29
vue ui
30

31
# Start UI on specific host and port
32
vue ui --host 0.0.0.0 --port 8080
33

34
# Start UI in headless mode (no browser opening)
35
vue ui --headless
36

37
# Start UI quietly (no startup messages)
38
vue ui --quiet
39

40
# Start UI in development mode
41
vue ui --dev
42
```
43

44
### UI Function (Programmatic)
45

46
Programmatic interface for starting the Vue CLI UI server.
47

48
```typescript { .api }
49
/**
50
 * Start Vue CLI UI server programmatically
51
 * @param options - UI server options
52
 */
53
async function ui(options?: UIOptions): Promise<UIServer>;
54

55
interface UIOptions {
56
  /** Server host address */
57
  host?: string;
58
  /** Server port number */
59
  port?: number;
60
  /** Run in development mode */
61
  dev?: boolean;
62
  /** Suppress startup messages */
63
  quiet?: boolean;
64
  /** Don't open browser automatically */
65
  headless?: boolean;
66
}
67

68
interface UIServer {
69
  /** Server host */
70
  host: string;
71
  /** Server port */
72
  port: number;
73
  /** Server URL */
74
  url: string;
75
  /** Close the server */
76
  close(): Promise<void>;
77
}
78
```
79

80
**Usage Examples:**
81

82
```typescript
83
import { ui } from "@vue/cli";
84

85
// Start UI server
86
const server = await ui({
87
  host: 'localhost',
88
  port: 8080,
89
  headless: true
90
});
91

92
console.log(`Vue CLI UI running at ${server.url}`);
93

94
// Close server when done
95
await server.close();
96
```
97

98
### UI Features
99

100
Core features available in the Vue CLI graphical interface.
101

102
```typescript { .api }
103
/**
104
 * Vue CLI UI provides the following features through web interface:
105
 */
106

107
/**
108
 * Project Management
109
 * - Create new Vue projects with interactive wizards
110
 * - Import existing Vue projects
111
 * - Browse and switch between projects
112
 * - Project dashboard with overview and quick actions
113
 */
114
interface ProjectManagement {
115
  /** Create new project with guided setup */
116
  createProject: ProjectCreationWizard;
117
  /** Import existing project into UI */
118
  importProject: ProjectImportFlow;
119
  /** Switch between managed projects */
120
  projectSwitcher: ProjectList;
121
  /** Project overview dashboard */
122
  dashboard: ProjectDashboard;
123
}
124

125
/**
126
 * Plugin Management
127
 * - Browse available plugins
128
 * - Install and configure plugins
129
 * - Update existing plugins
130
 * - Plugin configuration UI
131
 */
132
interface PluginManagement {
133
  /** Plugin marketplace browser */
134
  pluginBrowser: PluginMarketplace;
135
  /** Install plugins with configuration */
136
  pluginInstaller: PluginInstallationWizard;
137
  /** Update plugins to newer versions */
138
  pluginUpdater: PluginUpdateInterface;
139
  /** Configure plugin settings */
140
  pluginConfigurator: PluginConfigurationPanel;
141
}
142

143
/**
144
 * Configuration Management
145
 * - Visual webpack config editor
146
 * - ESLint configuration interface
147
 * - Environment variable management
148
 * - Build configuration options
149
 */
150
interface ConfigurationManagement {
151
  /** Visual webpack configuration */
152
  webpackConfig: WebpackConfigEditor;
153
  /** ESLint rules configuration */
154
  eslintConfig: ESLintConfigInterface;
155
  /** Environment variables editor */
156
  envVars: EnvironmentVariableEditor;
157
  /** Build settings configuration */
158
  buildConfig: BuildConfigurationPanel;
159
}
160

161
/**
162
 * Task Management
163
 * - Run npm/yarn scripts visually
164
 * - Development server controls
165
 * - Build process monitoring
166
 * - Task output streaming
167
 */
168
interface TaskManagement {
169
  /** Visual script runner */
170
  taskRunner: TaskExecutionInterface;
171
  /** Development server controls */
172
  devServer: DevelopmentServerPanel;
173
  /** Build process monitoring */
174
  buildMonitor: BuildProcessInterface;
175
  /** Real-time task output */
176
  taskOutput: OutputStreamingPanel;
177
}
178
```
179

180
### UI Server Architecture
181

182
Architecture and components of the Vue CLI UI server.
183

184
```typescript { .api }
185
/**
186
 * Vue CLI UI server architecture components:
187
 */
188

189
/**
190
 * Backend API Server
191
 * - Express.js server providing REST and GraphQL APIs
192
 * - Project file system operations
193
 * - Plugin management operations
194
 * - Task execution and monitoring
195
 */
196
interface UIBackend {
197
  /** REST API endpoints */
198
  restAPI: RESTEndpoints;
199
  /** GraphQL API for complex queries */
200
  graphqlAPI: GraphQLSchema;
201
  /** WebSocket connection for real-time updates */
202
  websocket: WebSocketServer;
203
  /** File system operations */
204
  fileSystem: FileSystemAPI;
205
}
206

207
/**
208
 * Frontend Web Application
209
 * - Vue.js single-page application
210
 * - Component library for Vue CLI-specific UI
211
 * - Real-time updates via WebSocket
212
 * - Responsive design for various screen sizes
213
 */
214
interface UIFrontend {
215
  /** Main Vue.js application */
216
  app: VueApplication;
217
  /** UI component library */
218
  components: UIComponentLibrary;
219
  /** State management */
220
  store: VuexStore;
221
  /** Routing configuration */
222
  router: VueRouter;
223
}
224
```
225

226
### API Endpoints
227

228
REST API endpoints provided by the UI server.
229

230
```typescript { .api }
231
/**
232
 * REST API endpoints for Vue CLI UI:
233
 */
234
interface RESTEndpoints {
235
  /** Project management endpoints */
236
  projects: {
237
    /** GET /api/projects - List all projects */
238
    list: () => Project[];
239
    /** POST /api/projects - Create new project */
240
    create: (data: ProjectCreationData) => Project;
241
    /** GET /api/projects/:id - Get project details */
242
    get: (id: string) => Project;
243
    /** PUT /api/projects/:id - Update project */
244
    update: (id: string, data: ProjectUpdateData) => Project;
245
    /** DELETE /api/projects/:id - Remove project */
246
    delete: (id: string) => void;
247
  };
248

249
  /** Plugin management endpoints */
250
  plugins: {
251
    /** GET /api/plugins - List available plugins */
252
    list: () => Plugin[];
253
    /** POST /api/plugins - Install plugin */
254
    install: (data: PluginInstallData) => InstallationResult;
255
    /** PUT /api/plugins/:id - Update plugin */
256
    update: (id: string) => UpdateResult;
257
    /** DELETE /api/plugins/:id - Remove plugin */
258
    remove: (id: string) => void;
259
  };
260

261
  /** Task management endpoints */
262
  tasks: {
263
    /** GET /api/tasks - List available tasks */
264
    list: () => Task[];
265
    /** POST /api/tasks/:id/run - Run task */
266
    run: (id: string, args?: string[]) => TaskExecution;
267
    /** POST /api/tasks/:id/stop - Stop running task */
268
    stop: (id: string) => void;
269
    /** GET /api/tasks/:id/logs - Get task logs */
270
    logs: (id: string) => TaskLog[];
271
  };
272

273
  /** Configuration endpoints */
274
  config: {
275
    /** GET /api/config/webpack - Get webpack config */
276
    webpack: () => WebpackConfig;
277
    /** PUT /api/config/webpack - Update webpack config */
278
    updateWebpack: (config: WebpackConfig) => void;
279
    /** GET /api/config/eslint - Get ESLint config */
280
    eslint: () => ESLintConfig;
281
    /** PUT /api/config/eslint - Update ESLint config */
282
    updateEslint: (config: ESLintConfig) => void;
283
  };
284
}
285
```
286

287
### WebSocket Events
288

289
Real-time events provided through WebSocket connection.
290

291
```typescript { .api }
292
/**
293
 * WebSocket events for real-time updates:
294
 */
295
interface WebSocketEvents {
296
  /** Task execution events */
297
  tasks: {
298
    /** Task started event */
299
    'task:start': TaskStartEvent;
300
    /** Task progress update */
301
    'task:progress': TaskProgressEvent;
302
    /** Task completed event */
303
    'task:complete': TaskCompleteEvent;
304
    /** Task error event */
305
    'task:error': TaskErrorEvent;
306
    /** Task output stream */
307
    'task:output': TaskOutputEvent;
308
  };
309

310
  /** File system events */
311
  files: {
312
    /** File changed event */
313
    'file:changed': FileChangeEvent;
314
    /** File added event */
315
    'file:added': FileAddEvent;
316
    /** File deleted event */
317
    'file:deleted': FileDeleteEvent;
318
  };
319

320
  /** Plugin events */
321
  plugins: {
322
    /** Plugin installed event */
323
    'plugin:installed': PluginInstallEvent;
324
    /** Plugin updated event */
325
    'plugin:updated': PluginUpdateEvent;
326
    /** Plugin removed event */
327
    'plugin:removed': PluginRemoveEvent;
328
  };
329

330
  /** Project events */
331
  projects: {
332
    /** Project opened event */
333
    'project:opened': ProjectOpenEvent;
334
    /** Project config changed */
335
    'project:config-changed': ProjectConfigChangeEvent;
336
  };
337
}
338
```
339

340
### UI Component System
341

342
Reusable UI components provided by the Vue CLI UI.
343

344
```typescript { .api }
345
/**
346
 * Vue CLI UI component library:
347
 */
348
interface UIComponents {
349
  /** Layout components */
350
  layout: {
351
    /** Main application layout */
352
    AppLayout: VueComponent;
353
    /** Navigation sidebar */
354
    Sidebar: VueComponent;
355
    /** Top navigation bar */
356
    Navbar: VueComponent;
357
    /** Content area wrapper */
358
    ContentArea: VueComponent;
359
  };
360

361
  /** Form components */
362
  forms: {
363
    /** Plugin configuration form */
364
    PluginConfigForm: VueComponent;
365
    /** Project creation form */
366
    ProjectCreateForm: VueComponent;
367
    /** Configuration editor form */
368
    ConfigEditorForm: VueComponent;
369
    /** Task parameter form */
370
    TaskParamsForm: VueComponent;
371
  };
372

373
  /** Display components */
374
  display: {
375
    /** Project card display */
376
    ProjectCard: VueComponent;
377
    /** Plugin list item */
378
    PluginListItem: VueComponent;
379
    /** Task execution status */
380
    TaskStatus: VueComponent;
381
    /** Configuration viewer */
382
    ConfigViewer: VueComponent;
383
  };
384

385
  /** Interactive components */
386
  interactive: {
387
    /** File browser */
388
    FileBrowser: VueComponent;
389
    /** Task runner interface */
390
    TaskRunner: VueComponent;
391
    /** Plugin installer wizard */
392
    PluginWizard: VueComponent;
393
    /** Configuration editor */
394
    ConfigEditor: VueComponent;
395
  };
396
}
397
```
398

399
### Configuration Options
400

401
UI server configuration and customization options.
402

403
```typescript { .api }
404
/**
405
 * UI server configuration options:
406
 */
407
interface UIServerConfig {
408
  /** Server binding configuration */
409
  server: {
410
    /** Host to bind server to */
411
    host: string;
412
    /** Port to bind server to */
413
    port: number;
414
    /** Enable HTTPS */
415
    https: boolean;
416
    /** SSL certificate options */
417
    ssl?: SSLOptions;
418
  };
419

420
  /** Development mode settings */
421
  development: {
422
    /** Enable development mode */
423
    enabled: boolean;
424
    /** Hot module replacement */
425
    hmr: boolean;
426
    /** Source maps */
427
    sourceMaps: boolean;
428
    /** Debug logging */
429
    debug: boolean;
430
  };
431

432
  /** Security settings */
433
  security: {
434
    /** CORS configuration */
435
    cors: CORSOptions;
436
    /** Authentication settings */
437
    auth?: AuthOptions;
438
    /** Rate limiting */
439
    rateLimit?: RateLimitOptions;
440
  };
441

442
  /** UI customization */
443
  ui: {
444
    /** Custom theme */
445
    theme?: ThemeOptions;
446
    /** Plugin availability */
447
    plugins: PluginAvailabilityOptions;
448
    /** Feature flags */
449
    features: FeatureFlagOptions;
450
  };
451
}
452
```
453

454
### Browser Integration
455

456
Integration with system browsers for launching and managing the UI.
457

458
```typescript { .api }
459
/**
460
 * Browser integration utilities:
461
 */
462

463
/**
464
 * Open URL in default browser
465
 * @param url - URL to open
466
 * @param options - Browser options
467
 */
468
function openBrowser(url: string, options?: BrowserOptions): Promise<void>;
469

470
interface BrowserOptions {
471
  /** Specific browser to use */
472
  browser?: string;
473
  /** Wait for browser to close */
474
  wait?: boolean;
475
  /** Browser arguments */
476
  args?: string[];
477
}
478

479
/**
480
 * Detect available browsers on system
481
 * @returns List of available browsers
482
 */
483
function detectBrowsers(): Browser[];
484

485
interface Browser {
486
  /** Browser name */
487
  name: string;
488
  /** Browser executable path */
489
  path: string;
490
  /** Browser version */
491
  version: string;
492
  /** Whether browser is default */
493
  isDefault: boolean;
494
}
495
```