0
# Configuration
1

2
PrimeVue configuration plugin providing theme management, localization, global settings, and application setup. This is the core plugin that enables PrimeVue functionality across Vue applications.
3

4
## Capabilities
5

6
### PrimeVue Plugin
7

8
Main Vue plugin for configuring PrimeVue across the application.
9

10
```typescript { .api }
11
declare const PrimeVue: {
12
  /**
13
   * Install PrimeVue plugin with configuration options
14
   * @param app - Vue application instance
15
   * @param options - Configuration options
16
   */
17
  install(app: any, options?: PrimeVueConfiguration): void;
18
};
19

20
interface PrimeVueConfiguration {
21
  /** Enable ripple effect on components */
22
  ripple?: boolean;
23
  /** @deprecated Use inputVariant instead */
24
  inputStyle?: 'filled' | 'outlined' | undefined;
25
  /** Input component styling variant */
26
  inputVariant?: 'filled' | 'outlined' | undefined;
27
  /** Localization options */
28
  locale?: PrimeVueLocaleOptions;
29
  /** Filter match mode options */
30
  filterMatchModeOptions?: any;
31
  /** Z-index configuration for overlays */
32
  zIndex?: PrimeVueZIndexOptions;
33
  /** Theme configuration */
34
  theme?: any;
35
  /** Enable unstyled mode */
36
  unstyled?: boolean;
37
  /** PassThrough configuration */
38
  pt?: any;
39
  /** PassThrough options */
40
  ptOptions?: any;
41
  /** Content Security Policy options */
42
  csp?: PrimeVueCSPOptions;
43
}
44

45
declare const defaultOptions: PrimeVueConfiguration;
46
```
47

48
**Usage Examples:**
49

50
```typescript
51
import { createApp } from 'vue';
52
import PrimeVue from '@primevue/core/config';
53
import App from './App.vue';
54

55
const app = createApp(App);
56

57
// Basic setup
58
app.use(PrimeVue);
59

60
// With configuration
61
app.use(PrimeVue, {
62
  theme: 'aura-light-green',
63
  ripple: true,
64
  locale: {
65
    accept: 'Yes',
66
    reject: 'No',
67
    // ... more locale options
68
  },
69
  zIndex: {
70
    modal: 1100,
71
    overlay: 1000,
72
    menu: 1000,
73
    tooltip: 1100
74
  }
75
});
76
```
77

78
### usePrimeVue Composable
79

80
Vue composable for accessing PrimeVue configuration within components.
81

82
```typescript { .api }
83
/**
84
 * Access PrimeVue configuration from within Vue components
85
 * @returns PrimeVue instance with configuration
86
 * @throws Error if PrimeVue is not installed
87
 */
88
declare function usePrimeVue(): {
89
  config: PrimeVueConfiguration;
90
};
91
```
92

93
**Usage Examples:**
94

95
```typescript
96
import { usePrimeVue } from '@primevue/core/config';
97

98
// In a Vue component
99
export default {
100
  setup() {
101
    const primevue = usePrimeVue();
102
    
103
    // Access configuration
104
    const isRippleEnabled = primevue.config.ripple;
105
    const currentTheme = primevue.config.theme;
106
    
107
    return { isRippleEnabled, currentTheme };
108
  }
109
};
110
```
111

112
### Configuration Setup Functions
113

114
Low-level functions for PrimeVue setup and configuration management.
115

116
```typescript { .api }
117
/**
118
 * Setup PrimeVue with configuration
119
 * @param app - Vue application instance
120
 * @param options - Configuration options
121
 * @returns PrimeVue instance
122
 */
123
declare function setup(app: any, options: PrimeVueConfiguration): any;
124

125
/**
126
 * Clear PrimeVue configuration and theme watchers
127
 */
128
declare function clearConfig(): void;
129

130
/**
131
 * Setup configuration watchers and theme management
132
 * @param app - Vue application instance
133
 * @param PrimeVue - PrimeVue instance
134
 */
135
declare function setupConfig(app: any, PrimeVue: any): void;
136
```
137

138
## Configuration Types
139

140
### Z-Index Options
141

142
```typescript { .api }
143
interface PrimeVueZIndexOptions {
144
  /** Z-index for modal overlays */
145
  modal?: number;
146
  /** Z-index for general overlays */
147
  overlay?: number;
148
  /** Z-index for menu components */
149
  menu?: number;
150
  /** Z-index for tooltip components */
151
  tooltip?: number;
152
}
153
```
154

155
### CSP Options
156

157
```typescript { .api }
158
interface PrimeVueCSPOptions {
159
  /** Nonce value for Content Security Policy */
160
  nonce?: string;
161
}
162
```
163

164
### Locale Options
165

166
```typescript { .api }
167
interface PrimeVueLocaleOptions {
168
  // Filter labels
169
  startsWith?: string;
170
  contains?: string;
171
  notContains?: string;
172
  endsWith?: string;
173
  equals?: string;
174
  notEquals?: string;
175
  noFilter?: string;
176
  lt?: string;
177
  lte?: string;
178
  gt?: string;
179
  gte?: string;
180
  dateIs?: string;
181
  dateIsNot?: string;
182
  dateBefore?: string;
183
  dateAfter?: string;
184
  clear?: string;
185
  apply?: string;
186
  matchAll?: string;
187
  matchAny?: string;
188
  addRule?: string;
189
  removeRule?: string;
190
  
191
  // Common actions
192
  accept?: string;
193
  reject?: string;
194
  choose?: string;
195
  upload?: string;
196
  cancel?: string;
197
  completed?: string;
198
  pending?: string;
199
  
200
  // File handling
201
  fileSizeTypes: string[];
202
  fileChosenMessage?: string;
203
  noFileChosenMessage?: string;
204
  
205
  // Date/Time
206
  dayNames: string[];
207
  dayNamesShort: string[];
208
  dayNamesMin: string[];
209
  monthNames: string[];
210
  monthNamesShort: string[];
211
  chooseYear?: string;
212
  chooseMonth?: string;
213
  chooseDate?: string;
214
  prevDecade?: string;
215
  nextDecade?: string;
216
  prevYear?: string;
217
  nextYear?: string;
218
  prevMonth?: string;
219
  nextMonth?: string;
220
  prevHour?: string;
221
  nextHour?: string;
222
  prevMinute?: string;
223
  nextMinute?: string;
224
  prevSecond?: string;
225
  nextSecond?: string;
226
  am?: string;
227
  pm?: string;
228
  today?: string;
229
  weekHeader?: string;
230
  firstDayOfWeek?: number;
231
  showMonthAfterYear?: boolean;
232
  dateFormat?: string;
233
  
234
  // Password strength
235
  weak?: string;
236
  medium?: string;
237
  strong?: string;
238
  passwordPrompt?: string;
239
  
240
  // Messages
241
  emptyFilterMessage?: string;
242
  searchMessage?: string;
243
  selectionMessage?: string;
244
  emptySelectionMessage?: string;
245
  emptySearchMessage?: string;
246
  emptyMessage?: string;
247
  
248
  // Accessibility
249
  aria?: PrimeVueLocaleAriaOptions;
250
}
251

252
interface PrimeVueLocaleAriaOptions {
253
  trueLabel?: string;
254
  falseLabel?: string;
255
  nullLabel?: string;
256
  star?: string;
257
  stars?: string;
258
  selectAll?: string;
259
  unselectAll?: string;
260
  close?: string;
261
  previous?: string;
262
  next?: string;
263
  navigation?: string;
264
  scrollTop?: string;
265
  moveUp?: string;
266
  moveTop?: string;
267
  moveDown?: string;
268
  moveBottom?: string;
269
  moveToTarget?: string;
270
  moveToSource?: string;
271
  moveAllToTarget?: string;
272
  moveAllToSource?: string;
273
  pageLabel?: string;
274
  firstPageLabel?: string;
275
  lastPageLabel?: string;
276
  nextPageLabel?: string;
277
  prevPageLabel?: string;
278
  rowsPerPageLabel?: string;
279
  jumpToPageDropdownLabel?: string;
280
  jumpToPageInputLabel?: string;
281
  selectRow?: string;
282
  unselectRow?: string;
283
  expandRow?: string;
284
  collapseRow?: string;
285
  showFilterMenu?: string;
286
  hideFilterMenu?: string;
287
  filterOperator?: string;
288
  filterConstraint?: string;
289
  editRow?: string;
290
  saveEdit?: string;
291
  cancelEdit?: string;
292
  listView?: string;
293
  gridView?: string;
294
  slide?: string;
295
  slideNumber?: string;
296
  zoomImage?: string;
297
  zoomIn?: string;
298
  zoomOut?: string;
299
  rotateRight?: string;
300
  rotateLeft?: string;
301
  listLabel?: string;
302
}
303
```
304

305
## Vue Integration
306

307
PrimeVue extends Vue's global properties and component system:
308

309
```typescript { .api }
310
declare module 'vue' {
311
  interface ComponentCustomProperties {
312
    $primevue: {
313
      config: PrimeVueConfiguration;
314
    };
315
  }
316
}
317
```
318

319
## Import Patterns
320

321
```typescript
322
// Main plugin import
323
import PrimeVue from '@primevue/core/config';
324

325
// Named imports
326
import { usePrimeVue, setup, defaultOptions } from '@primevue/core/config';
327

328
// From main package
329
import { usePrimeVue } from '@primevue/core';
330
```