0
# @primevue/core
1
2
@primevue/core provides the foundational infrastructure for PrimeVue, a comprehensive Vue.js UI component library. It contains essential utilities, base components, services, and configuration systems that power the entire PrimeVue ecosystem, including filtering services, icon constants, component base classes, styling utilities, and Vue composables.
3
4
## Package Information
5
6
- **Package Name**: @primevue/core
7
- **Package Type**: npm
8
- **Language**: JavaScript/TypeScript
9
- **Installation**: `npm install @primevue/core`
10
11
## Core Imports
12
13
```typescript
14
import { FilterService, PrimeIcons, PrimeVue } from "@primevue/core";
15
import { BaseComponent, BaseDirective } from "@primevue/core";
16
import { useStyle, useId } from "@primevue/core";
17
```
18
19
Modular imports:
20
21
```typescript
22
import { FilterService, FilterMatchMode } from "@primevue/core/api";
23
import PrimeVue from "@primevue/core/config";
24
import BaseComponent from "@primevue/core/basecomponent";
25
import { useStyle } from "@primevue/core/usestyle";
26
```
27
28
## Basic Usage
29
30
```typescript
31
import { createApp } from 'vue';
32
import PrimeVue from '@primevue/core/config';
33
import { FilterService, FilterMatchMode, PrimeIcons } from '@primevue/core/api';
34
35
// Configure PrimeVue
36
const app = createApp(App);
37
app.use(PrimeVue, {
38
theme: 'aura-light-green',
39
ripple: true
40
});
41
42
// Use filtering service
43
const filteredData = FilterService.filter(
44
users,
45
['name', 'email'],
46
'john',
47
FilterMatchMode.CONTAINS
48
);
49
50
// Use icon constants
51
const searchIcon = PrimeIcons.SEARCH; // 'pi pi-search'
52
```
53
54
## Architecture
55
56
@primevue/core is organized into several key areas:
57
58
- **API Services**: Data filtering, icon constants, and severity levels
59
- **Configuration System**: PrimeVue plugin with theming and localization
60
- **Base Classes**: Foundation classes for components and directives
61
- **Styling System**: Dynamic style loading and theme management
62
- **Vue Composables**: Utilities for ID generation, styling, and more
63
- **Utility Functions**: Helper classes and core functionality
64
65
## Capabilities
66
67
### Data Filtering and Constants
68
69
Core API services for data manipulation and UI constants. Essential for building data-driven components with filtering capabilities.
70
71
```typescript { .api }
72
declare namespace FilterService {
73
function filter(
74
value: any[],
75
fields: string[],
76
filterValue: any,
77
filterMatchMode: string,
78
filterLocale?: string
79
): any[];
80
}
81
82
declare const FilterMatchMode: {
83
readonly CONTAINS: string;
84
readonly STARTS_WITH: string;
85
readonly ENDS_WITH: string;
86
// ... more filter modes
87
};
88
89
declare const PrimeIcons: {
90
readonly SEARCH: string;
91
readonly CHECK: string;
92
readonly TIMES: string;
93
// ... 200+ icon constants
94
};
95
```
96
97
[API Services](./api-services.md)
98
99
### Configuration and Plugin System
100
101
PrimeVue configuration plugin providing theming, localization, and global settings management.
102
103
```typescript { .api }
104
declare const PrimeVue: {
105
install(app: any, options?: PrimeVueConfiguration): void;
106
};
107
108
interface PrimeVueConfiguration {
109
theme?: any;
110
ripple?: boolean;
111
locale?: PrimeVueLocaleOptions;
112
unstyled?: boolean;
113
pt?: any;
114
// ... more configuration options
115
}
116
117
declare function usePrimeVue(): {
118
config: PrimeVueConfiguration;
119
};
120
```
121
122
[Configuration](./configuration.md)
123
124
### Base Component Infrastructure
125
126
Foundation classes for building PrimeVue components with consistent behavior, styling, and theming support.
127
128
```typescript { .api }
129
declare const BaseComponent: DefineComponent<{
130
pt?: Object;
131
ptOptions?: Object;
132
unstyled?: Boolean;
133
dt?: Object;
134
}>;
135
136
declare const BaseDirective: {
137
extend(name: string, options?: any): any;
138
};
139
```
140
141
[Base Classes](./base-classes.md)
142
143
### Vue Composables
144
145
Utility composables for common functionality like ID generation, dynamic styling, and attribute selection.
146
147
```typescript { .api }
148
declare function useId(initialValue?: string): string;
149
150
declare function useStyle(css: string, options?: UseStyleOptions): {
151
load: (css?: string, props?: any) => void;
152
unload: () => void;
153
isLoaded: Readonly<Ref<boolean>>;
154
};
155
```
156
157
[Composables](./composables.md)
158
159
### Utility Functions
160
161
Helper classes and utility functions for component development and data manipulation.
162
163
```typescript { .api }
164
declare class ConnectedOverlayScrollHandler {
165
constructor(element: any, listener?: () => void);
166
bindScrollListener(): void;
167
unbindScrollListener(): void;
168
destroy(): void;
169
}
170
171
declare function getVNodeProp(vnode: any, prop: string): any;
172
```
173
174
[Utilities](./utilities.md)
175
176
## Types
177
178
```typescript { .api }
179
type Booleanish = boolean | 'true' | 'false';
180
type Numberish = number | string;
181
type Nullable<T = void> = T | null | undefined;
182
type PassThrough<T = void> = T | object | undefined;
183
type DesignToken<T = void> = T | object | undefined;
184
185
type EmitFn<Options = ObjectEmitsOptions, Event extends keyof Options = keyof Options> =
186
Options extends Array<infer V>
187
? (e: V, ...args: any[]) => void
188
: {} extends Options
189
? (e: string, ...args: any[]) => void
190
: UnionToIntersection<{
191
[key in Event]: Options[key] extends (...args: infer Args) => any
192
? (e: key, ...args: Args) => void
193
: (e: key, ...args: any[]) => void;
194
}[Event]>;
195
196
type DefineComponent<P = {}, S = {}, E = {}, M = {}> = {
197
new (): {
198
$props: P & PublicProps;
199
$slots: S;
200
$emit: E;
201
} & M;
202
};
203
```