primevue-skilld

Name: primevue-skilld
Author: skilld-dev

173stars8forks

How to install primevue-skilld?

skilld-dev/vue-ecosystem-skills/primevue-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill primevue-skilld

Installs into the current project.

Summary

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and profe.... ALWAYS use when writing code importing \"primevue\". Consult for debugging, be

Files · 1

View on GitHub

SKILL.md

1	# primefaces/primevue `primevue@4.5.5`
2	Tags: v2-stable: 2.10.4, v3-stable: 3.53.1, latest: 4.5.5
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `Calendar` renamed to `DatePicker` — v3 component renamed to `DatePicker` in v4 [source](./references/releases/CHANGELOG.md)
10
11	- BREAKING: `Dropdown` renamed to `Select` — v3 component renamed to `Select` in v4 [source](./references/releases/CHANGELOG.md)
12
13	- BREAKING: `Sidebar` renamed to `Drawer` — v3 component renamed to `Drawer` in v4 [source](./references/releases/CHANGELOG.md)
14
15	- BREAKING: `OverlayPanel` renamed to `Popover` — v3 component renamed to `Popover` in v4 [source](./references/releases/CHANGELOG.md)
16
17	- BREAKING: `InputSwitch` renamed to `ToggleSwitch` — v3 component renamed to `ToggleSwitch` in v4 [source](./references/releases/CHANGELOG.md)
18
19	- BREAKING: `TabView` replaced by `Tabs` — new component structure using `TabList`, `Tab`, `TabPanels`, and `TabPanel` [source](./references/docs/tabs.md)
20
21	- BREAKING: `Steps` replaced by `Stepper` — new component structure using `StepList`, `Step`, `StepPanels`, and `StepPanel` [source](./references/docs/stepper.md)
22
23	- BREAKING: `Accordion` reimplementation — now uses `AccordionPanel`, `AccordionHeader`, and `AccordionContent` components [source](./references/docs/accordion.md)
24
25	- BREAKING: `v-model:value` — v4 uses `v-model:value` for active state in `Tabs`, `Accordion`, and `Stepper` instead of `v-model` [source](./references/docs/tabs.md)
26
27	- DEPRECATED: `inputStyle` — property replaced by `inputVariant` (values: 'filled' \| 'outlined') [source](./references/releases/CHANGELOG.md)
28
29	- NEW: `@primevue/forms` — new dedicated package for advanced form management and validation [source](./references/releases/CHANGELOG.md)
30
31	- NEW: `Fluid` component — layout component that makes descendants span full width [source](./references/docs/fluid.md)
32
33	- NEW: `IconField` & `InputIcon` — new components to wrap inputs and icons for decorative purposes [source](./references/docs/iconfield.md)
34
35	- NEW: `useId` & `useAttrSelector` — new core composables for unique ID generation and attribute selectors [source](./references/releases/CHANGELOG.md)
36
37	Also changed: `DataTable` `showClearButton` default is `false` (v4.3.0) · `IftaLabel` new component for in-field labels · `Checkbox` added `indeterminate` state · `OverlayBadge` new component replaces `Badge` directive · `InlineMessage` component deprecated · `iconPosition` removed from `IconField` · `warning` property renamed to `warn` · `Drawer` added `before-hide` emit (v4.3.0)
38
39	## Best Practices
40
41	- Use the `Fluid` component as a wrapper for bulk application of full-width styles to inputs instead of adding the `fluid` prop to every individual field for cleaner and more maintainable templates [source](./references/docs/fluid.md)
42
43	```vue
44	<Fluid>
45	<div class="grid grid-cols-2 gap-4">
46	<InputText placeholder="Full Width" />
47	<DatePicker placeholder="Full Width" />
48	<Select placeholder="Full Width" />
49	</div>
50	</Fluid>
51	```
52
53	- In Stepper vertical layouts, always wrap `Step` and `StepPanel` inside a `StepItem` component to ensure correct structure and connection between headers and content [source](./references/docs/stepper.md)
54
55	- Use `asChild` and `v-slot` on components like `Step` or `Tab` to implement headless mode for full UI control while retaining PrimeVue's built-in accessibility logic [source](./references/docs/stepper.md)
56
57	```vue
58	<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
59	<button @click="activateCallback" v-bind="a11yAttrs.header">
60	Step {{ value }}
61	</button>
62	</Step>
63	```
64
65	- For performant row expansion in `DataTable` with large datasets, use an object for `expandedRows` combined with `dataKey` instead of an array of row objects [source](./references/docs/datatable.md)
66
67	```ts
68	// Preferred (O(1) lookup)
69	const expandedRows = ref({ '1004': true, '1005': true });
70
71	// In template
72	<DataTable v-model:expandedRows="expandedRows" dataKey="id">
73	```
74
75	- Enable automatic user preference persistence (sorting, filtering, paging) in `DataTable` using `stateStorage` and `stateKey` to improve UX across page visits [source](./references/docs/datatable.md)
76
77	- Add a `delay` to `VirtualScroller` to throttle rendering during rapid scrolling, significantly improving UI responsiveness for extremely large lists [source](./references/docs/virtualscroller.md)
78
79	```vu

People who liked this also viewed

6 picks

Type

primevue-skilld

173stars8forks

View on GitHub

How to install primevue-skilld?

skilld-dev/vue-ecosystem-skills/primevue-skilld

$npx -y skills add skilld-dev/vue-ecosystem-skills --skill primevue-skilld

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# primefaces/primevue `primevue@4.5.5`
2	Tags: v2-stable: 2.10.4, v3-stable: 3.53.1, latest: 4.5.5
3
4	References: [Docs](./references/docs/_INDEX.md)
5	## API Changes
6
7	This section documents version-specific API changes — prioritize recent major/minor releases.
8
9	- BREAKING: `Calendar` renamed to `DatePicker` — v3 component renamed to `DatePicker` in v4 [source](./references/releases/CHANGELOG.md)
10
11	- BREAKING: `Dropdown` renamed to `Select` — v3 component renamed to `Select` in v4 [source](./references/releases/CHANGELOG.md)
12
13	- BREAKING: `Sidebar` renamed to `Drawer` — v3 component renamed to `Drawer` in v4 [source](./references/releases/CHANGELOG.md)
14
15	- BREAKING: `OverlayPanel` renamed to `Popover` — v3 component renamed to `Popover` in v4 [source](./references/releases/CHANGELOG.md)
16
17	- BREAKING: `InputSwitch` renamed to `ToggleSwitch` — v3 component renamed to `ToggleSwitch` in v4 [source](./references/releases/CHANGELOG.md)
18
19	- BREAKING: `TabView` replaced by `Tabs` — new component structure using `TabList`, `Tab`, `TabPanels`, and `TabPanel` [source](./references/docs/tabs.md)
20
21	- BREAKING: `Steps` replaced by `Stepper` — new component structure using `StepList`, `Step`, `StepPanels`, and `StepPanel` [source](./references/docs/stepper.md)
22
23	- BREAKING: `Accordion` reimplementation — now uses `AccordionPanel`, `AccordionHeader`, and `AccordionContent` components [source](./references/docs/accordion.md)
24
25	- BREAKING: `v-model:value` — v4 uses `v-model:value` for active state in `Tabs`, `Accordion`, and `Stepper` instead of `v-model` [source](./references/docs/tabs.md)
26
27	- DEPRECATED: `inputStyle` — property replaced by `inputVariant` (values: 'filled' \| 'outlined') [source](./references/releases/CHANGELOG.md)
28
29	- NEW: `@primevue/forms` — new dedicated package for advanced form management and validation [source](./references/releases/CHANGELOG.md)
30
31	- NEW: `Fluid` component — layout component that makes descendants span full width [source](./references/docs/fluid.md)
32
33	- NEW: `IconField` & `InputIcon` — new components to wrap inputs and icons for decorative purposes [source](./references/docs/iconfield.md)
34
35	- NEW: `useId` & `useAttrSelector` — new core composables for unique ID generation and attribute selectors [source](./references/releases/CHANGELOG.md)
36
37	Also changed: `DataTable` `showClearButton` default is `false` (v4.3.0) · `IftaLabel` new component for in-field labels · `Checkbox` added `indeterminate` state · `OverlayBadge` new component replaces `Badge` directive · `InlineMessage` component deprecated · `iconPosition` removed from `IconField` · `warning` property renamed to `warn` · `Drawer` added `before-hide` emit (v4.3.0)
38
39	## Best Practices
40
41	- Use the `Fluid` component as a wrapper for bulk application of full-width styles to inputs instead of adding the `fluid` prop to every individual field for cleaner and more maintainable templates [source](./references/docs/fluid.md)
42
43	```vue
44	<Fluid>
45	<div class="grid grid-cols-2 gap-4">
46	<InputText placeholder="Full Width" />
47	<DatePicker placeholder="Full Width" />
48	<Select placeholder="Full Width" />
49	</div>
50	</Fluid>
51	```
52
53	- In Stepper vertical layouts, always wrap `Step` and `StepPanel` inside a `StepItem` component to ensure correct structure and connection between headers and content [source](./references/docs/stepper.md)
54
55	- Use `asChild` and `v-slot` on components like `Step` or `Tab` to implement headless mode for full UI control while retaining PrimeVue's built-in accessibility logic [source](./references/docs/stepper.md)
56
57	```vue
58	<Step v-slot="{ activateCallback, value, a11yAttrs }" asChild :value="1">
59	<button @click="activateCallback" v-bind="a11yAttrs.header">
60	Step {{ value }}
61	</button>
62	</Step>
63	```
64
65	- For performant row expansion in `DataTable` with large datasets, use an object for `expandedRows` combined with `dataKey` instead of an array of row objects [source](./references/docs/datatable.md)
66
67	```ts
68	// Preferred (O(1) lookup)
69	const expandedRows = ref({ '1004': true, '1005': true });
70
71	// In template
72	<DataTable v-model:expandedRows="expandedRows" dataKey="id">
73	```
74
75	- Enable automatic user preference persistence (sorting, filtering, paging) in `DataTable` using `stateStorage` and `stateKey` to improve UX across page visits [source](./references/docs/datatable.md)
76
77	- Add a `delay` to `VirtualScroller` to throttle rendering during rapid scrolling, significantly improving UI responsiveness for extremely large lists [source](./references/docs/virtualscroller.md)
78
79	```vu

People who liked this also viewed

6 picks

Type