0
# PrimeVue
1

2
PrimeVue is a comprehensive Vue.js UI component library that provides 140+ production-ready components with extensive theming capabilities, accessibility features, and enterprise-grade functionality. The library supports both Vue 2 and Vue 3, offers multiple styling approaches including styled, unstyled, and passthrough modes, and integrates seamlessly with popular CSS frameworks like Material Design, Bootstrap, and Tailwind CSS.
3

4
## Package Information
5

6
- **Package Name**: primevue
7
- **Package Type**: npm  
8
- **Language**: TypeScript/JavaScript
9
- **Installation**: `npm install primevue`
10

11
## Core Imports
12

13
Import individual components for optimal tree-shaking:
14

15
```typescript
16
import Button from "primevue/button";
17
import DataTable from "primevue/datatable";
18
import { useToast } from "primevue/usetoast";
19
```
20

21
For bulk imports (larger bundle size):
22

23
```typescript
24
import { Button, DataTable, useToast } from "primevue";
25
```
26

27
CommonJS:
28

29
```javascript
30
const Button = require("primevue/button");
31
const { useToast } = require("primevue/usetoast");
32
```
33

34
## Basic Usage
35

36
```typescript
37
import { createApp } from 'vue';
38
import PrimeVue from 'primevue/config';
39
import Button from 'primevue/button';
40
import InputText from 'primevue/inputtext';
41
import DataTable from 'primevue/datatable';
42
import Column from 'primevue/column';
43

44
const app = createApp(App);
45

46
// Install PrimeVue configuration
47
app.use(PrimeVue);
48

49
// Register components globally (optional)
50
app.component('Button', Button);
51
app.component('InputText', InputText);
52
app.component('DataTable', DataTable);
53
app.component('Column', Column);
54

55
app.mount('#app');
56
```
57

58
## Architecture
59

60
PrimeVue is built around several key architectural patterns:
61

62
- **Component Library**: 117+ Vue components covering forms, data display, layout, navigation, overlays, and utilities
63
- **Directive System**: 7 Vue directives for cross-cutting concerns (ripple effects, tooltips, focus management)
64
- **Service Layer**: Plugin services for global functionality (toasts, confirmations, dynamic dialogs)
65
- **Composable APIs**: Vue 3 Composition API hooks for service integration and state management
66
- **Theming Engine**: CSS-in-JS system with design tokens and theme customization
67
- **PassThrough System**: Deep customization capabilities for overriding internal component markup and styles
68
- **Accessibility**: WCAG compliant with ARIA support, keyboard navigation, and screen reader compatibility
69

70
## Capabilities
71

72
### Form Components
73

74
Complete form control library with 29 input components including text inputs, dropdowns, date pickers, file uploads, and validation integration.
75

76
```typescript { .api }
77
// Text Inputs
78
import InputText from "primevue/inputtext";
79
import Textarea from "primevue/textarea";
80
import Password from "primevue/password";
81
import InputMask from "primevue/inputmask";
82
import InputNumber from "primevue/inputnumber";
83

84
// Selection Controls
85
import Dropdown from "primevue/dropdown";
86
import MultiSelect from "primevue/multiselect";
87
import Checkbox from "primevue/checkbox";
88
import RadioButton from "primevue/radiobutton";
89
import ToggleButton from "primevue/togglebutton";
90

91
// Date & Time
92
import Calendar from "primevue/calendar";
93
import DatePicker from "primevue/datepicker";
94

95
// File & Media
96
import FileUpload from "primevue/fileupload";
97
import ColorPicker from "primevue/colorpicker";
98
```
99

100
[Form Components](./form-components.md)
101

102
### Data Display Components
103

104
Advanced data visualization components including data tables, trees, charts, and organizational displays with sorting, filtering, and pagination.
105

106
```typescript { .api }
107
// Data Tables
108
import DataTable from "primevue/datatable";
109
import Column from "primevue/column";
110
import TreeTable from "primevue/treetable";
111

112
// Lists & Trees
113
import Tree from "primevue/tree";
114
import OrderList from "primevue/orderlist";
115
import PickList from "primevue/picklist";
116

117
// Charts & Visualization
118
import Chart from "primevue/chart";
119
import OrganizationChart from "primevue/organizationchart";
120
import Timeline from "primevue/timeline";
121
```
122

123
[Data Display Components](./data-display-components.md)
124

125
### Layout Components
126

127
Structural components for organizing content including panels, accordions, tabs, splitters, and responsive containers.
128

129
```typescript { .api }
130
// Containers
131
import Panel from "primevue/panel";
132
import Card from "primevue/card";
133
import Fieldset from "primevue/fieldset";
134
import Divider from "primevue/divider";
135

136
// Collapsible Content
137
import Accordion from "primevue/accordion";
138
import AccordionPanel from "primevue/accordionpanel";
139

140
// Tabbed Interfaces
141
import Tabs from "primevue/tabs";
142
import Tab from "primevue/tab";
143
import TabPanels from "primevue/tabpanels";
144

145
// Layout Utilities
146
import Splitter from "primevue/splitter";
147
import ScrollPanel from "primevue/scrollpanel";
148
```
149

150
[Layout Components](./layout-components.md)
151

152
### Navigation Components
153

154
Navigation elements including menus, breadcrumbs, steps, and dock-style navigation with hierarchical support.
155

156
```typescript { .api }
157
// Menus
158
import Menubar from "primevue/menubar";
159
import Menu from "primevue/menu";
160
import ContextMenu from "primevue/contextmenu";
161
import MegaMenu from "primevue/megamenu";
162

163
// Process Navigation
164
import Steps from "primevue/steps";
165
import Stepper from "primevue/stepper";
166
import Breadcrumb from "primevue/breadcrumb";
167

168
// Special Navigation
169
import Dock from "primevue/dock";
170
import TabMenu from "primevue/tabmenu";
171
```
172

173
[Navigation Components](./navigation-components.md)
174

175
### Button Components
176

177
Button controls with various styles, grouping, split actions, and floating action buttons.
178

179
```typescript { .api }
180
import Button from "primevue/button";
181
import ButtonGroup from "primevue/buttongroup";
182
import SplitButton from "primevue/splitbutton";
183
import SpeedDial from "primevue/speeddial";
184
import SelectButton from "primevue/selectbutton";
185
```
186

187
[Button Components](./button-components.md)
188

189
### Overlay Components
190

191
Modal dialogs, drawers, popovers, and overlay panels for displaying contextual content and collecting user input.
192

193
```typescript { .api }
194
// Dialogs
195
import Dialog from "primevue/dialog";
196
import ConfirmDialog from "primevue/confirmdialog";
197
import DynamicDialog from "primevue/dynamicdialog";
198

199
// Side Panels
200
import Drawer from "primevue/drawer";
201
import Sidebar from "primevue/sidebar";
202

203
// Popups
204
import OverlayPanel from "primevue/overlaypanel";
205
import Popover from "primevue/popover";
206
import ConfirmPopup from "primevue/confirmpopup";
207
```
208

209
[Overlay Components](./overlay-components.md)
210

211
### Service Layer
212

213
Global services for managing toasts, confirmations, dynamic dialogs, and terminal interfaces with both plugin and composable APIs.
214

215
```typescript { .api }
216
// Vue 3 Composables
217
import { useToast } from "primevue/usetoast";
218
import { useConfirm } from "primevue/useconfirm";
219
import { useDialog } from "primevue/usedialog";
220

221
// Plugin Services
222
import ToastService from "primevue/toastservice";
223
import ConfirmationService from "primevue/confirmationservice";
224
import DialogService from "primevue/dialogservice";
225
import TerminalService from "primevue/terminalservice";
226
```
227

228
[Services & Composables](./services-composables.md)
229

230
### Directives
231

232
Vue directives for adding interactive behaviors like ripple effects, tooltips, focus management, and keyboard filtering.
233

234
```typescript { .api }
235
import Ripple from "primevue/ripple";
236
import Tooltip from "primevue/tooltip";
237
import BadgeDirective from "primevue/badgedirective";
238
import FocusTrap from "primevue/focustrap";
239
import StyleClass from "primevue/styleclass";
240
import KeyFilter from "primevue/keyfilter";
241
import AnimateOnScroll from "primevue/animateonscroll";
242
```
243

244
[Directives](./directives.md)
245

246
### Utility Components
247

248
Helper components for progress indication, loading states, messages, avatars, and various UI utilities.
249

250
```typescript { .api }
251
// Progress & Loading
252
import ProgressBar from "primevue/progressbar";
253
import ProgressSpinner from "primevue/progressspinner";
254
import Skeleton from "primevue/skeleton";
255
import BlockUI from "primevue/blockui";
256

257
// Messages & Feedback
258
import Toast from "primevue/toast";
259
import Message from "primevue/message";
260
import InlineMessage from "primevue/inlinemessage";
261

262
// Visual Elements
263
import Avatar from "primevue/avatar";
264
import Badge from "primevue/badge";
265
import Chip from "primevue/chip";
266
import Tag from "primevue/tag";
267
```
268

269
[Utility Components](./utility-components.md)
270

271
### Configuration & Theming
272

273
Global configuration, theme management, styling utilities, and PassThrough system for deep customization.
274

275
```typescript { .api }
276
import PrimeVue from "primevue/config";
277
import { useStyle } from "primevue/usestyle";
278
import { usePassThrough } from "primevue/passthrough";
279

280
// Style imports for components
281
import "primevue/resources/themes/aura-light-green/theme.css";
282
import "primevue/resources/primevue.min.css";
283
import "primeicons/primeicons.css";
284
```
285

286
[Configuration & Theming](./configuration-theming.md)
287

288
## Types
289

290
Core type definitions used throughout the PrimeVue ecosystem:
291

292
```typescript { .api }
293
// PassThrough system for deep customization
294
interface PassThroughOptions {
295
  mergeSections?: boolean;
296
  mergeProps?: boolean;
297
}
298

299
// Common component properties
300
interface BaseComponentProps {
301
  pt?: object;
302
  ptOptions?: PassThroughOptions;
303
  unstyled?: boolean;
304
}
305

306
// Menu item structure for navigation components
307
interface MenuItem {
308
  label?: string;
309
  icon?: string;
310
  command?: (event: MenuItemCommandEvent) => void;
311
  url?: string;
312
  items?: MenuItem[];
313
  disabled?: boolean;
314
  visible?: boolean;
315
  target?: string;
316
  separator?: boolean;
317
  badge?: string;
318
  badgeClass?: string;
319
  class?: string;
320
  style?: any;
321
}
322

323
// Event interfaces
324
interface MenuItemCommandEvent {
325
  originalEvent: Event;
326
  item: MenuItem;
327
}
328
```