0
# Services & Composables
1

2
Global services for managing toasts, confirmations, dynamic dialogs, and terminal interfaces with both Vue plugin and Vue 3 Composition API support. These services provide centralized state management and consistent user interaction patterns across applications.
3

4
## Capabilities
5

6
### Vue 3 Composables
7

8
#### useToast
9
Composable for accessing toast notification functionality.
10

11
```typescript { .api }
12
/**
13
 * Vue 3 composable for toast notifications
14
 */
15
import { useToast } from "primevue/usetoast";
16

17
interface ToastServiceMethods {
18
  /**
19
   * Displays a new toast notification
20
   */
21
  add(message: ToastMessage): void;
22
  
23
  /**
24
   * Removes a specific toast by message object
25
   */
26
  remove(message: ToastMessage): void;
27
  
28
  /**
29
   * Removes a toast by group name
30
   */
31
  removeGroup(group: string): void;
32
  
33
  /**
34
   * Removes all toast notifications
35
   */
36
  removeAllGroups(): void;
37
}
38

39
function useToast(): ToastServiceMethods;
40

41
interface ToastMessage {
42
  severity?: "success" | "info" | "warn" | "error" | "secondary" | "contrast";
43
  summary?: string;
44
  detail?: string;
45
  life?: number;
46
  closable?: boolean;
47
  group?: string;
48
  styleClass?: string;
49
  contentStyleClass?: string;
50
}
51
```
52

53
**Usage Example:**
54

55
```vue
56
<script setup>
57
import { useToast } from 'primevue/usetoast';
58

59
const toast = useToast();
60

61
const showSuccess = () => {
62
  toast.add({
63
    severity: 'success',
64
    summary: 'Success Message',
65
    detail: 'Message Content',
66
    life: 3000
67
  });
68
};
69

70
const showError = () => {
71
  toast.add({
72
    severity: 'error',
73
    summary: 'Error Message',
74
    detail: 'Something went wrong',
75
    life: 5000
76
  });
77
};
78
</script>
79
```
80

81
#### useConfirm
82
Composable for accessing confirmation dialog functionality.
83

84
```typescript { .api }
85
/**
86
 * Vue 3 composable for confirmation dialogs
87
 */
88
import { useConfirm } from "primevue/useconfirm";
89

90
interface ConfirmationServiceMethods {
91
  /**
92
   * Shows a confirmation dialog
93
   */
94
  require(options: ConfirmationOptions): void;
95
  
96
  /**
97
   * Closes the confirmation dialog
98
   */
99
  close(): void;
100
}
101

102
function useConfirm(): ConfirmationServiceMethods;
103

104
interface ConfirmationOptions {
105
  message?: string;
106
  group?: string;
107
  icon?: string;
108
  header?: string;
109
  accept?: () => void;
110
  reject?: () => void;
111
  acceptLabel?: string;
112
  rejectLabel?: string;
113
  acceptIcon?: string;
114
  rejectIcon?: string;
115
  acceptClass?: string;
116
  rejectClass?: string;
117
  position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
118
  blockScroll?: boolean;
119
  defaultFocus?: "accept" | "reject" | "none";
120
}
121
```
122

123
**Usage Example:**
124

125
```vue
126
<script setup>
127
import { useConfirm } from 'primevue/useconfirm';
128

129
const confirm = useConfirm();
130

131
const confirmDelete = () => {
132
  confirm.require({
133
    message: 'Do you want to delete this record?',
134
    header: 'Delete Confirmation',
135
    icon: 'pi pi-info-circle',
136
    rejectClass: 'p-button-text p-button-text',
137
    acceptClass: 'p-button-danger p-button-text',
138
    accept: () => {
139
      // Delete logic
140
    },
141
    reject: () => {
142
      // Cancel logic
143
    }
144
  });
145
};
146
</script>
147
```
148

149
#### useDialog
150
Composable for accessing dynamic dialog functionality.
151

152
```typescript { .api }
153
/**
154
 * Vue 3 composable for dynamic dialogs
155
 */
156
import { useDialog } from "primevue/usedialog";
157

158
interface DialogServiceMethods {
159
  /**
160
   * Opens a dynamic dialog with specified component
161
   */
162
  open(component: any, options?: DynamicDialogOptions): DynamicDialogInstance;
163
}
164

165
function useDialog(): DialogServiceMethods;
166

167
interface DynamicDialogOptions {
168
  data?: object;
169
  props?: object;
170
  header?: string;
171
  style?: any;
172
  class?: string;
173
  contentStyle?: any;
174
  contentClass?: string;
175
  modal?: boolean;
176
  closable?: boolean;
177
  dismissableMask?: boolean;
178
  closeOnEscape?: boolean;
179
  showHeader?: boolean;
180
  baseZIndex?: number;
181
  autoZIndex?: boolean;
182
  position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
183
  maximizable?: boolean;
184
  breakpoints?: object;
185
  draggable?: boolean;
186
  resizable?: boolean;
187
  minX?: number;
188
  minY?: number;
189
  keepInViewport?: boolean;
190
  appendTo?: string;
191
  blockScroll?: boolean;
192
  onClose?: (options: DynamicDialogCloseOptions) => void;
193
  onMaximize?: (options: DynamicDialogMaximizeOptions) => void;
194
  onUnmaximize?: (options: DynamicDialogMaximizeOptions) => void;
195
  onDragStart?: (event: Event) => void;
196
  onDragEnd?: (event: Event) => void;
197
  onResizeStart?: (event: Event) => void;
198
  onResizeEnd?: (event: Event) => void;
199
}
200

201
interface DynamicDialogInstance {
202
  data: any;
203
  options: DynamicDialogOptions;
204
  close: (params?: any) => void;
205
}
206
```
207

208
### Plugin Services
209

210
#### ToastService
211
Vue plugin for global toast notification management.
212

213
```typescript { .api }
214
/**
215
 * Vue plugin for toast notifications
216
 */
217
import ToastService from "primevue/toastservice";
218

219
// Plugin installation
220
app.use(ToastService);
221

222
// Usage in Options API
223
this.$toast.add(message);
224
this.$toast.remove(message);
225
this.$toast.removeGroup(group);
226
this.$toast.removeAllGroups();
227
```
228

229
#### ConfirmationService
230
Vue plugin for global confirmation dialog management.
231

232
```typescript { .api }
233
/**
234
 * Vue plugin for confirmation dialogs
235
 */
236
import ConfirmationService from "primevue/confirmationservice";
237

238
// Plugin installation
239
app.use(ConfirmationService);
240

241
// Usage in Options API
242
this.$confirm.require(options);
243
this.$confirm.close();
244
```
245

246
#### DialogService
247
Vue plugin for dynamic dialog management.
248

249
```typescript { .api }
250
/**
251
 * Vue plugin for dynamic dialogs
252
 */
253
import DialogService from "primevue/dialogservice";
254

255
// Plugin installation
256
app.use(DialogService);
257

258
// Usage in Options API
259
const dialogRef = this.$dialog.open(MyComponent, {
260
  header: 'Dynamic Dialog',
261
  modal: true,
262
  data: { userId: 123 }
263
});
264
```
265

266
#### TerminalService
267
Service for Terminal component command processing.
268

269
```typescript { .api }
270
/**
271
 * Service for terminal command processing
272
 */
273
import TerminalService from "primevue/terminalservice";
274

275
interface TerminalServiceMethods {
276
  /**
277
   * Registers a command handler
278
   */
279
  on(command: string, handler: (text: string) => void): void;
280
  
281
  /**
282
   * Removes a command handler
283
   */
284
  off(command: string, handler?: (text: string) => void): void;
285
  
286
  /**
287
   * Emits a response to the terminal
288
   */
289
  emit(command: string, parameters?: any): void;
290
}
291
```
292

293
**Usage Example:**
294

295
```javascript
296
import TerminalService from 'primevue/terminalservice';
297

298
// Register command handlers
299
TerminalService.on('greet', (text) => {
300
  const name = text.split(' ')[1];
301
  TerminalService.emit('response', `Hello ${name || 'World'}!`);
302
});
303

304
TerminalService.on('date', () => {
305
  TerminalService.emit('response', new Date().toDateString());
306
});
307

308
TerminalService.on('clear', () => {
309
  TerminalService.emit('clear');
310
});
311
```
312

313
### Event Bus Services
314

315
#### ToastEventBus
316
Event communication system for toast notifications.
317

318
```typescript { .api }
319
/**
320
 * Event bus for toast notifications
321
 */
322
import ToastEventBus from "primevue/toasteventbus";
323

324
interface ToastEventBusInterface {
325
  emit(event: string, ...args: any[]): void;
326
  on(event: string, handler: (...args: any[]) => void): void;
327
  off(event: string, handler?: (...args: any[]) => void): void;
328
}
329
```
330

331
#### ConfirmationEventBus
332
Event communication system for confirmation dialogs.
333

334
```typescript { .api }
335
/**
336
 * Event bus for confirmation dialogs
337
 */
338
import ConfirmationEventBus from "primevue/confirmationeventbus";
339

340
interface ConfirmationEventBusInterface {
341
  emit(event: string, ...args: any[]): void;
342
  on(event: string, handler: (...args: any[]) => void): void;
343
  off(event: string, handler?: (...args: any[]) => void): void;
344
}
345
```
346

347
#### DynamicDialogEventBus
348
Event communication system for dynamic dialogs.
349

350
```typescript { .api }
351
/**
352
 * Event bus for dynamic dialogs
353
 */
354
import DynamicDialogEventBus from "primevue/dynamicdialogeventbus";
355

356
interface DynamicDialogEventBusInterface {
357
  emit(event: string, ...args: any[]): void;
358
  on(event: string, handler: (...args: any[]) => void): void;
359
  off(event: string, handler?: (...args: any[]) => void): void;
360
}
361
```
362

363
#### OverlayEventBus
364
Event communication system for overlay components.
365

366
```typescript { .api }
367
/**
368
 * Event bus for overlay components
369
 */
370
import OverlayEventBus from "primevue/overlayeventbus";
371

372
interface OverlayEventBusInterface {
373
  emit(event: string, ...args: any[]): void;
374
  on(event: string, handler: (...args: any[]) => void): void;
375
  off(event: string, handler?: (...args: any[]) => void): void;
376
}
377
```
378

379
### Service Integration Patterns
380

381
**Complete Service Setup Example:**
382

383
```vue
384
<template>
385
  <div>
386
    <!-- Toast container -->
387
    <Toast />
388
    
389
    <!-- Confirmation dialog -->
390
    <ConfirmDialog />
391
    
392
    <!-- Dynamic dialog container -->
393
    <DynamicDialog />
394
    
395
    <!-- Your app content -->
396
    <Button @click="showToast" label="Show Toast" />
397
    <Button @click="confirmAction" label="Confirm Action" />
398
    <Button @click="openDialog" label="Open Dialog" />
399
  </div>
400
</template>
401

402
<script setup>
403
import { useToast, useConfirm, useDialog } from 'primevue';
404
import Toast from 'primevue/toast';
405
import ConfirmDialog from 'primevue/confirmdialog';
406
import DynamicDialog from 'primevue/dynamicdialog';
407
import Button from 'primevue/button';
408
import MyDialogComponent from './MyDialogComponent.vue';
409

410
const toast = useToast();
411
const confirm = useConfirm();
412
const dialog = useDialog();
413

414
const showToast = () => {
415
  toast.add({
416
    severity: 'success',
417
    summary: 'Success',
418
    detail: 'Message sent successfully',
419
    life: 3000
420
  });
421
};
422

423
const confirmAction = () => {
424
  confirm.require({
425
    message: 'Are you sure you want to proceed?',
426
    header: 'Confirmation',
427
    icon: 'pi pi-exclamation-triangle',
428
    accept: () => {
429
      toast.add({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted', life: 3000 });
430
    },
431
    reject: () => {
432
      toast.add({ severity: 'warn', summary: 'Rejected', detail: 'You have rejected', life: 3000 });
433
    }
434
  });
435
};
436

437
const openDialog = () => {
438
  const dialogRef = dialog.open(MyDialogComponent, {
439
    header: 'Dynamic Component',
440
    style: { width: '50vw' },
441
    breakpoints: { '960px': '75vw', '641px': '90vw' },
442
    modal: true,
443
    data: { message: 'Hello from parent!' }
444
  });
445
};
446
</script>
447
```
448

449
## Types
450

451
Service-specific type definitions:
452

453
```typescript { .api }
454
// Dynamic dialog types
455
interface DynamicDialogCloseOptions {
456
  data?: any;
457
  type?: string;
458
}
459

460
interface DynamicDialogMaximizeOptions {
461
  originalEvent: Event;
462
  maximized: boolean;
463
}
464

465
// Toast severity levels
466
type ToastSeverity = "success" | "info" | "warn" | "error" | "secondary" | "contrast";
467

468
// Confirmation positions
469
type ConfirmationPosition = "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
470

471
// Service symbols for dependency injection
472
declare const PrimeVueToastSymbol: InjectionKey<ToastServiceMethods>;
473
declare const PrimeVueConfirmSymbol: InjectionKey<ConfirmationServiceMethods>;
474
declare const PrimeVueDialogSymbol: InjectionKey<DialogServiceMethods>;
475
```