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
```