@primevue/mcp 4.5.5 → 5.0.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (173) hide show
  1. package/LICENSE.md +45 -21
  2. package/README.md +48 -250
  3. package/data/components.json +47269 -0
  4. package/data/llms/components/accordion.md +629 -0
  5. package/data/llms/components/animateonscroll.md +165 -0
  6. package/data/llms/components/autocomplete.md +995 -0
  7. package/data/llms/components/avatar.md +264 -0
  8. package/data/llms/components/badge.md +200 -0
  9. package/data/llms/components/blockui.md +99 -0
  10. package/data/llms/components/breadcrumb.md +269 -0
  11. package/data/llms/components/button.md +902 -0
  12. package/data/llms/components/card.md +209 -0
  13. package/data/llms/components/carousel.md +506 -0
  14. package/data/llms/components/cascadeselect.md +1207 -0
  15. package/data/llms/components/chart.md +1022 -0
  16. package/data/llms/components/checkbox.md +401 -0
  17. package/data/llms/components/chip.md +206 -0
  18. package/data/llms/components/colorpicker.md +213 -0
  19. package/data/llms/components/commandmenu.md +660 -0
  20. package/data/llms/components/compare.md +407 -0
  21. package/data/llms/components/confirmdialog.md +343 -0
  22. package/data/llms/components/confirmpopup.md +252 -0
  23. package/data/llms/components/contextmenu.md +522 -0
  24. package/data/llms/components/datatable.md +5266 -0
  25. package/data/llms/components/dataview.md +569 -0
  26. package/data/llms/components/datepicker.md +964 -0
  27. package/data/llms/components/deferredcontent.md +96 -0
  28. package/data/llms/components/dialog.md +702 -0
  29. package/data/llms/components/divider.md +152 -0
  30. package/data/llms/components/dock.md +488 -0
  31. package/data/llms/components/drawer.md +469 -0
  32. package/data/llms/components/dynamicdialog.md +214 -0
  33. package/data/llms/components/editor.md +205 -0
  34. package/data/llms/components/fieldset.md +253 -0
  35. package/data/llms/components/fileupload.md +459 -0
  36. package/data/llms/components/floatlabel.md +144 -0
  37. package/data/llms/components/fluid.md +104 -0
  38. package/data/llms/components/focustrap.md +59 -0
  39. package/data/llms/components/forms.md +344 -0
  40. package/data/llms/components/galleria.md +1119 -0
  41. package/data/llms/components/gallery.md +1003 -0
  42. package/data/llms/components/iconfield.md +283 -0
  43. package/data/llms/components/iftalabel.md +96 -0
  44. package/data/llms/components/image.md +179 -0
  45. package/data/llms/components/imagecompare.md +108 -0
  46. package/data/llms/components/inplace.md +183 -0
  47. package/data/llms/components/inputcolor.md +869 -0
  48. package/data/llms/components/inputgroup.md +419 -0
  49. package/data/llms/components/inputmask.md +345 -0
  50. package/data/llms/components/inputnumber.md +551 -0
  51. package/data/llms/components/inputotp.md +345 -0
  52. package/data/llms/components/inputpassword.md +738 -0
  53. package/data/llms/components/inputtags.md +432 -0
  54. package/data/llms/components/inputtext.md +569 -0
  55. package/data/llms/components/installation.md +1 -0
  56. package/data/llms/components/keyfilter.md +116 -0
  57. package/data/llms/components/knob.md +318 -0
  58. package/data/llms/components/label.md +151 -0
  59. package/data/llms/components/laravel.md +53 -0
  60. package/data/llms/components/listbox.md +636 -0
  61. package/data/llms/components/mask.md +203 -0
  62. package/data/llms/components/mcp.md +39 -0
  63. package/data/llms/components/megamenu.md +563 -0
  64. package/data/llms/components/menu.md +651 -0
  65. package/data/llms/components/menubar.md +446 -0
  66. package/data/llms/components/message.md +497 -0
  67. package/data/llms/components/metergroup.md +281 -0
  68. package/data/llms/components/multiselect.md +752 -0
  69. package/data/llms/components/orderlist.md +224 -0
  70. package/data/llms/components/organizationchart.md +418 -0
  71. package/data/llms/components/paginator.md +221 -0
  72. package/data/llms/components/panel.md +321 -0
  73. package/data/llms/components/panelmenu.md +703 -0
  74. package/data/llms/components/password.md +657 -0
  75. package/data/llms/components/picklist.md +286 -0
  76. package/data/llms/components/popover.md +145 -0
  77. package/data/llms/components/progressbar.md +242 -0
  78. package/data/llms/components/progressspinner.md +104 -0
  79. package/data/llms/components/radiobutton.md +427 -0
  80. package/data/llms/components/rating.md +312 -0
  81. package/data/llms/components/ripple.md +91 -0
  82. package/data/llms/components/scrollarea.md +700 -0
  83. package/data/llms/components/scrollpanel.md +131 -0
  84. package/data/llms/components/scrolltop.md +87 -0
  85. package/data/llms/components/select.md +1251 -0
  86. package/data/llms/components/selectbutton.md +268 -0
  87. package/data/llms/components/sidebar.md +2232 -0
  88. package/data/llms/components/skeleton.md +302 -0
  89. package/data/llms/components/slider.md +416 -0
  90. package/data/llms/components/speeddial.md +402 -0
  91. package/data/llms/components/splitbutton.md +840 -0
  92. package/data/llms/components/splitter.md +447 -0
  93. package/data/llms/components/stepper.md +551 -0
  94. package/data/llms/components/styleclass.md +226 -0
  95. package/data/llms/components/tabs.md +609 -0
  96. package/data/llms/components/tag.md +178 -0
  97. package/data/llms/components/terminal.md +123 -0
  98. package/data/llms/components/textarea.md +519 -0
  99. package/data/llms/components/tieredmenu.md +578 -0
  100. package/data/llms/components/timeline.md +494 -0
  101. package/data/llms/components/toast.md +472 -0
  102. package/data/llms/components/togglebutton.md +276 -0
  103. package/data/llms/components/toggleswitch.md +271 -0
  104. package/data/llms/components/toolbar.md +140 -0
  105. package/data/llms/components/tooltip.md +160 -0
  106. package/data/llms/components/tree.md +1076 -0
  107. package/data/llms/components/treeselect.md +660 -0
  108. package/data/llms/components/treetable.md +2493 -0
  109. package/data/llms/components/virtualscroller.md +265 -0
  110. package/data/llms/guides/autoimport.md +28 -0
  111. package/data/llms/guides/cdn.md +72 -0
  112. package/data/llms/guides/configuration.md +158 -0
  113. package/data/llms/guides/customicons.md +67 -0
  114. package/data/llms/guides/guides/accessibility.md +27 -0
  115. package/data/llms/guides/guides/animations.md +119 -0
  116. package/data/llms/guides/guides/rtl.md +7 -0
  117. package/data/llms/guides/icons.md +136 -0
  118. package/data/llms/guides/installation.md +3 -0
  119. package/data/llms/guides/laravel.md +66 -0
  120. package/data/llms/guides/llms.md +15 -0
  121. package/data/llms/guides/mcp.md +104 -0
  122. package/data/llms/guides/migration/v4.md +15 -0
  123. package/data/llms/guides/migration/v5.md +15 -0
  124. package/data/llms/guides/nuxt.md +141 -0
  125. package/data/llms/guides/passthrough.md +137 -0
  126. package/data/llms/guides/primeclt.md +43 -0
  127. package/data/llms/guides/tailwind.md +151 -0
  128. package/data/llms/guides/theming/styled.md +497 -0
  129. package/data/llms/guides/theming/unstyled.md +57 -0
  130. package/data/llms/guides/uikit.md +3 -0
  131. package/data/llms/guides/vite.md +90 -0
  132. package/data/llms/llms-full.txt +54465 -0
  133. package/data/llms/llms.txt +132 -0
  134. package/data/llms/pages/accessibility.md +27 -0
  135. package/data/llms/pages/animations.md +119 -0
  136. package/data/llms/pages/autoimport.md +28 -0
  137. package/data/llms/pages/cdn.md +72 -0
  138. package/data/llms/pages/configuration.md +158 -0
  139. package/data/llms/pages/contribution.md +31 -0
  140. package/data/llms/pages/customicons.md +67 -0
  141. package/data/llms/pages/designer.md +79 -0
  142. package/data/llms/pages/dynamicimports.md +7 -0
  143. package/data/llms/pages/forms.md +63 -0
  144. package/data/llms/pages/guides/accessibility.md +27 -0
  145. package/data/llms/pages/guides/animations.md +119 -0
  146. package/data/llms/pages/guides/rtl.md +7 -0
  147. package/data/llms/pages/icons.md +136 -0
  148. package/data/llms/pages/installation.md +3 -0
  149. package/data/llms/pages/introduction.md +23 -0
  150. package/data/llms/pages/laravel.md +66 -0
  151. package/data/llms/pages/llms.md +15 -0
  152. package/data/llms/pages/mcp.md +104 -0
  153. package/data/llms/pages/migration/v4.md +15 -0
  154. package/data/llms/pages/migration/v5.md +15 -0
  155. package/data/llms/pages/nuxt.md +141 -0
  156. package/data/llms/pages/passthrough.md +137 -0
  157. package/data/llms/pages/primeclt.md +43 -0
  158. package/data/llms/pages/rtl.md +7 -0
  159. package/data/llms/pages/setup.md +3 -0
  160. package/data/llms/pages/styled.md +497 -0
  161. package/data/llms/pages/tailwind.md +151 -0
  162. package/data/llms/pages/theming/styled.md +497 -0
  163. package/data/llms/pages/theming/unstyled.md +57 -0
  164. package/data/llms/pages/uikit.md +3 -0
  165. package/data/llms/pages/unstyled.md +57 -0
  166. package/data/llms/pages/v4.md +15 -0
  167. package/data/llms/pages/v5.md +15 -0
  168. package/data/llms/pages/vite.md +90 -0
  169. package/data/manifest.json +11117 -0
  170. package/data/mcp-data.json +55940 -0
  171. package/dist/index.d.ts +17 -1
  172. package/dist/index.js +66066 -72541
  173. package/package.json +10 -12
@@ -0,0 +1,104 @@
1
+ # MCP Server
2
+
3
+ Model Context Protocol (MCP) server for PrimeVue component library. Provides AI assistants with comprehensive access to PrimeVue component documentation.
4
+
5
+ ## Introduction
6
+
7
+ Model Context Protocol (MCP) is an open standard that enables AI models to connect with external tools and data sources . The PrimeVue MCP server provides AI assistants with comprehensive access to: Component documentation including props , events , slots , and methods Theming and styling with Pass Through and design tokens Code examples and usage patterns Accessibility information Installation and configuration guides
8
+
9
+ ## Claude Code
10
+
11
+ Add the PrimeVue MCP server using the CLI. After adding, start a new session and use /mcp to verify the connection.
12
+
13
+ ## VS Code
14
+
15
+ Create .vscode/mcp.json in your project or ~/Library/Application Support/Code/User/mcp.json for global configuration.
16
+
17
+ ```vue
18
+ {
19
+ "servers": {
20
+ "primevue": {
21
+ "command": "npx",
22
+ "args": ["-y", "@primevue/mcp"]
23
+ }
24
+ }
25
+ }
26
+ ```
27
+
28
+ ## OpenAI Codex
29
+
30
+ Add the PrimeVue MCP server using the CLI or edit ~/.codex/config.toml directly.
31
+
32
+ ```vue
33
+ # Using the CLI
34
+ codex mcp add primevue -- npx -y @primevue/mcp
35
+
36
+ # Or edit ~/.codex/config.toml
37
+ [mcp_servers.primevue]
38
+ command = "npx"
39
+ args = ["-y", "@primevue/mcp"]
40
+ ```
41
+
42
+ ## Cursor
43
+
44
+ Create .cursor/mcp.json in your project or ~/.cursor/mcp.json for global configuration.
45
+
46
+ ```vue
47
+ {
48
+ "mcpServers": {
49
+ "primevue": {
50
+ "command": "npx",
51
+ "args": ["-y", "@primevue/mcp"]
52
+ }
53
+ }
54
+ }
55
+ ```
56
+
57
+ ## Windsurf
58
+
59
+ Edit ~/.codeium/windsurf/mcp_config.json to add the PrimeVue MCP server.
60
+
61
+ ```vue
62
+ {
63
+ "mcpServers": {
64
+ "primevue": {
65
+ "command": "npx",
66
+ "args": ["-y", "@primevue/mcp"]
67
+ }
68
+ }
69
+ }
70
+ ```
71
+
72
+ ## Zed
73
+
74
+ Add to your Zed settings at ~/.config/zed/settings.json (Linux) or ~/Library/Application Support/Zed/settings.json (macOS).
75
+
76
+ ```vue
77
+ {
78
+ "context_servers": {
79
+ "primevue": {
80
+ "command": {
81
+ "path": "npx",
82
+ "args": ["-y", "@primevue/mcp"]
83
+ }
84
+ }
85
+ }
86
+ }
87
+ ```
88
+
89
+ ## Available Tools
90
+
91
+ Component Information Tools for exploring and understanding PrimeVue components. list_components : List all PrimeVue components with categories get_component : Get detailed info about a specific component search_components : Search components by name or description get_component_props : Get all props for a component get_component_events : Get all events for a component get_component_methods : Get all methods for a component get_component_slots : Get all slots for a component compare_components : Compare two components side by side Code Examples Tools for retrieving code samples and generating templates. get_usage_example : Get code examples for a component list_examples : List all available code examples get_example : Get a specific example by component and section generate_component_template : Generate a basic component template Theming & Styling Tools for customizing component appearance and styling. get_component_pt : Get Pass Through options for DOM customization get_component_tokens : Get design tokens (CSS variables) get_component_styles : Get CSS class names get_theming_guide : Get detailed theming guide get_passthrough_guide : Get Pass Through customization guide get_tailwind_guide : Get Tailwind CSS integration guide Documentation & Guides Tools for accessing PrimeVue documentation and guides. list_guides : List all guides and documentation pages get_guide : Get a specific guide by name get_configuration : Get PrimeVue configuration options get_installation : Get installation instructions get_accessibility_guide : Get accessibility guide get_accessibility_info : Get accessibility info for a component Search & Discovery Tools for finding components based on various criteria. search_all : Search across components, guides, and props suggest_component : Suggest components based on use case find_by_prop : Find components with a specific prop find_by_event : Find components that emit a specific event find_components_with_feature : Find components supporting a feature get_related_components : Find related components
92
+
93
+ ## Example Prompts
94
+
95
+ Once installed, try asking your AI assistant:
96
+
97
+ ```vue
98
+ "What are all the props available for the DataTable component?"
99
+ "Show me how to implement row selection in DataTable"
100
+ "How do I customize Button styles using Pass Through?"
101
+ "What design tokens are available for the Card component?"
102
+ "Find me a component for selecting multiple items from a list"
103
+ "Compare AutoComplete and Select components"
104
+ ```
@@ -0,0 +1,15 @@
1
+ # Migration
2
+
3
+ Migration guide to PrimeVue v4.
4
+
5
+ ## Overview
6
+
7
+ At PrimeTek, we have been developing UI component libraries since 2008. The web continues to undergo technological advancements, and as a result, we have to modernize and update our libraries to stay relevant. PrimeVue v4 is the next-generation version that fully embraces modern Web APIs and removes technical debt like the legacy-styled mode. Every component has been reviewed and enhanced. As part of our commitment to our products and the community, PrimeVue v3 will continue to be maintained until the end of 2024. The most notable feature is the new styled mode implementation. Previous iterations use SASS at an external repo called primevue-sass-theme which requires compilation of a theme.css a file. This file had to be included in the application and need to be swapped at runtime for basic tasks like dark mode or primary color changes. In v4, styled mode is now part of the core, SASS is not used at all, and a new design token based architecture that fully utilizes CSS variables has been created. The new API is modern and superior to the legacy styled mode. Names of some of the components have been changed to more common alternatives for example, Popover replaced OverlayPanel and InputSwitch is now called ToggleSwitch . Each component has been reviewed for a consistent naming between CSS class names and PT sections. An example would be the option element of a Select component that uses p-select-option for the class name. Components have been utilized more within other components, for instance Dialog close button is not actually a PrimeVue button so that closeButtonProps can be used to enable the features of button like outlined, raised and more. Whenever a component is using another component, in v3 the pt sections were causing confusion, to prevent this pc prefix is added to indicate that the PT section is actually a PrimeVue component, not a simple DOM element. This is especially useful because PT allows passing arbitrary attributes to DOM elements whereas if the element is actually a PrimeVue component, props can also be passed.
8
+
9
+ ## Compatible
10
+
11
+ Renamed Components Old names are deprecated but still functional, migrate to new import paths instead e.g. primevue/calendar becomes primevue/datepicker . Calendar -> DatePicker . Dropdown -> Select . InputSwitch -> ToggleSwitch . OverlayPanel -> Popover . Sidebar -> Drawer . Deprecated Components Components that are deprecated since their functionality is provided by other components. Chips | Use AutoComplete with multiple enabled and typeahead disabled. TabMenu | Use Tabs without panels. Steps | Use Stepper without panels. InlineMessage | Use Message component. BadgeDirective | Use OverlayBadge instead. TabView | Use the new Tabs components. Accordion | Use with the new AccordionHeader and AccordionContent components. Important Tickets Issue tickets with detailed information about component internal changes. #5426 #5437
12
+
13
+ ## Breaking
14
+
15
+ SASS Themes The styled mode theming has been reimplemented from scratch based on an all-new architecture. The theme.css and the primevue/resources do not exist anymore, so any imports of these assets needs to be removed. If you had a custom theme for v3, the theme needs to be recreated using the new APIs. See the customization section at styled mode for details. Removed Components TriStateCheckbox | Use Checkbox with indeterminate option. DataViewLayoutOptions | Use SelectButton instead. Removed APIs switchTheme function, use the new APIs like usePreset instead to dynamic theme switching. Relocated APIs Imports from primevue/api have been relocated to @primevue/core/api . Removed Files Themes under the primevue/resources path, migration to new styled mode is necessary. The legacy Tailwind preset at primevue/passthrough/tailwind . Message and InlineMessage InlineMessage is deprecated due to overlap with the Message . The spacing, closable and life properties of the Message have breaking changes to provide InlineMessage functionality. Default margin is removed, closable is false by default and messages do not disappear automatically. PT Section Names The experimental PassThrough feature is not production ready, there are changes on the PT section names due to alignment with CSS classes for certain components. If when component element is another PrimeVue component pc prefix is added for indication. Review the Pass Through section of a component for the new API. The Tailwind CSS presets for the unstyled mode are not updated to v4 yet. Removed Features Sidebar/Drawer size property is removed, use a responsive class utilty as replacement, demos have new examples. Rating cancel prop is removed as toggling the selected star value clears it. Inplace closable is removed in favor of templating and closeCallback prop. Removed Style Classes .p-link , use a button in link mode. .p-highlight , each component have its own class such as .p-select-option-selected . .p-fluid , use the new built-in fluid property of the supported components or the Fluid component. Nuxt Module The nuxt-primevue module has been replaced with the new @primevue/nuxt-module . The old module is still maintained for v3 users. PrimeFlex CSS In case you are using PrimeFlex CSS library, upgrade to PrimeFlex v4 since PrimeFlex v3 is not compatible with PrimeVue v4+.
@@ -0,0 +1,15 @@
1
+ # Migration to v5
2
+
3
+ Migration guide to PrimeVue v5.
4
+
5
+ ## Overview
6
+
7
+ PrimeVue v5 is the first release under the PrimeUI umbrella. Licensing moves to a dual Community/Commercial model. Read the full story for the background and road ahead. Breaking Changes PrimeVue follows semantic versioning , and this release introduces no breaking changes to the public component APIs. Existing applications should upgrade without code edits. If you encounter a regression that looks like a breaking change, please open an issue so we can address it. PRO Suite PrimeUI PRO is the new enterprise tier from PrimeTek, expanding the suite with production-ready components. Scheduler . Charts . Text Editor . Task Board . Diagram, on the roadmap DataGrid, on the roadmap Gantt Chart, on the roadmap PDF Viewer, on the roadmap New Components v5 introduces a fresh set of components: CommandMenu Compare Gallery InputTags InputPassword InputColor Sidebar ScrollArea Enhancements Several existing components have also been reworked: Carousel rebuilt around a compound API. Menu now supports multi-level navigation. Toast ships with new entry and exit animations. InputMask is now a directive rather than a component. Wide-ranging defect fixes across the suite. New documentation and demos. 16px Base PrimeVue sizes its components in rem units relative to the document root font size, now assumed to be 16px to match the browser default. Earlier versions assumed 14px, so every preset also ships a compat variant calibrated for a 14px root to keep existing layouts intact. See Base Font Size for technical details.
8
+
9
+ ## Deprecations
10
+
11
+ The following APIs are marked as deprecated in v5 and will be removed in a future major version. They continue to function in v5 so you can migrate gradually. API Deprecated Since Replacement Removal Status MultiSelect v5 Select component with multiple property v6 Galleria v5 Gallery component v6 Image v5 Gallery component v6 ColorPicker v5 InputColor component v6 ImageCompare v5 Compare component v6 ScrollPanel v5 ScrollArea component v6 Password v5 InputPassword component v6 InputMask v5 Mask directive v6 PanelMenu v5 Menu component with toggleable option v6 Chart v5 PrimeUI PRO Charts v6 Editor v5 PrimeUI PRO Editor v6 @primevue/icons package v5 SVG icons via @primeicons/vue v6 AutoComplete multiple property v5 InputTags component with typeahead v6 Button label , icon , iconPos , iconClass properties v5 Place the icon and label directly inside the default slot, ordering them as needed v6 Button badge , badgeClass , badgeSeverity properties v5 Compose a Badge component inside the default slot v6 Button loading and loadingIcon properties v5 Render your own spinner inside the default slot and toggle disabled v6 Tabs scrollable property v5 Scrolling is now the default behavior if necessary v6 Carousel data-driven ( value ) usage v5 Compound API with CarouselContent , CarouselItem and CarouselIndicators helpers. v6
12
+
13
+ ## Removals
14
+
15
+ The list of items that were deprecated in previous releases and removed in this iteration. API Deprecated In Replacement Status Calendar v4 DatePicker component Dropdown v4 Select component Chips v4 InputTags component InputChips v4 InputTags component InputSwitch v4 ToggleSwitch component OverlayPanel v4 Popover component TabView v4 Tabs component AccordionTab v4 Accordion with AccordionPanel / AccordionHeader / AccordionContent BadgeDirective ( v-badge ) v4 OverlayBadge component InlineMessage v4 Message component TabMenu v4 Tabs component (without panels) AutoComplete removeTokenIcon property and removetokenicon slot v4 chipIcon property and chipicon slot AutoComplete item-select / item-unselect events v4 option-select / option-unselect events AutoComplete loadingIcon property and loadingicon slot v4 loader property and loader slot AutoComplete dropdownbutton slot v4 dropdown slot Accordion activeIndex property and update:activeIndex / tab-open / tab-close / tab-click events v4 value property and update:value event Button plain property v4 contrast severity PrimeVue config inputStyle option v4 inputVariant option CascadeSelect panelStyle / panelClass / panelProps properties v4 overlayStyle / overlayClass / overlayProps properties Select panelStyle / panelClass properties v4 overlayStyle / overlayClass properties InputNumber incrementButtonIcon / decrementButtonIcon properties and incrementbuttonicon / decrementbuttonicon slots v4 incrementIcon / decrementIcon properties and incrementicon / decrementicon slots Column rowtogglericon / nodetogglericon slots v4 rowtoggleicon / nodetoggleicon slots DataTable reorderindicatorupicon / reorderindicatordownicon slots v4 rowreorderindicatorupicon / rowreorderindicatordownicon slots Tree searchicon / togglericon / nodetogglericon slots v4 filtericon / nodetoggleicon slots TreeSelect itemtogglericon slot v4 itemtoggleicon slot TreeSelect triggericon slot v4 dropdownicon slot Dock icon slot v4 itemicon slot Menu submenuheader slot v4 submenulabel slot Menubar menubutton / menubuttonicon slots v4 button / buttonicon slots MegaMenu menubutton / menubuttonicon slots v4 button / buttonicon slots Message sticky property v4 life property to control auto-close UniqueComponentId utility ( @primevue/core/utils ) v4 uuid from @primeuix/utils Component instance hasFluid getter (BaseInput) v4 $fluid Component instance filled getter (BaseEditableHolder) v4 $filled Root element $pc marker (set on each component's root DOM element) v4 No replacement (internal) Paginator firstpagelinkicon / prevpagelinkicon / nextpagelinkicon / lastpagelinkicon slots v4 firsticon / previcon / nexticon / lasticon slots Panel / Fieldset togglericon slot v4 toggleicon slot SplitButton menubuttonicon slot v4 dropdownicon slot Toast icon slot v4 messageicon slot OrderList / PickList item slot v4 option slot TabPanel header / headerStyle / headerClass / headerProps / headerActionProps / contentStyle / contentClass / contentProps / disabled properties and header slot (TabView-only) v4 Tabs structure ( Tab / TabList / TabPanels ) switchTheme function v4 usePreset and related theme APIs primevue/themes presets v4 @primeuix/themes nuxt-primevue module v4 @primevue/nuxt-module
@@ -0,0 +1,141 @@
1
+ # Install PrimeVue with Nuxt
2
+
3
+ Setting up PrimeVue in a Nuxt project.
4
+
5
+ ## Download
6
+
7
+ PrimeVue is available for download on npm registry along with the official @primevue/nuxt-module .
8
+
9
+ ```vue
10
+ # Using npm
11
+ npm install primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1
12
+ npm install --save-dev @primevue/nuxt-module@5.0.0-rc.2
13
+
14
+ # Using yarn
15
+ yarn add primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1
16
+ yarn add --dev @primevue/nuxt-module@5.0.0-rc.2
17
+
18
+ # Using pnpm
19
+ pnpm add primevue@5.0.0-rc.2 @primeuix/themes@3.0.0-rc.1
20
+ pnpm add -D @primevue/nuxt-module@5.0.0-rc.2
21
+ ```
22
+
23
+ ## Module
24
+
25
+ In nuxt.config file, add the @primevue/nuxt-module to the modules section and define primevue object for the configuration of the module.
26
+
27
+ ## Theme
28
+
29
+ Configure the module to use a theme like Aura.
30
+
31
+ ```vue
32
+ import Aura from '@primeuix/themes/aura';
33
+
34
+ export default defineNuxtConfig({
35
+ modules: [
36
+ '@primevue/nuxt-module'
37
+ ],
38
+ primevue: {
39
+ options: {
40
+ theme: {
41
+ preset: Aura
42
+ }
43
+ }
44
+ }
45
+ })
46
+ ```
47
+
48
+ ## License
49
+
50
+ Provide your PrimeUI license key through the public runtime config so the Nuxt module can pass it to PrimeVue. The key may also be supplied with the NUXT_PUBLIC_PRIMEUI_LICENSE environment variable, in which case no change to nuxt.config is required.
51
+
52
+ ```vue
53
+ export default defineNuxtConfig({
54
+ modules: ['@primevue/nuxt-module'],
55
+ runtimeConfig: {
56
+ public: {
57
+ PRIMEUI_LICENSE: process.env.NUXT_PUBLIC_PRIMEUI_LICENSE
58
+ }
59
+ }
60
+ });
61
+ ```
62
+
63
+ ## Verify
64
+
65
+ The nuxt-primevue module registers the components automatically with tree-shaking support so you may start using them instantly.
66
+
67
+ ```vue
68
+ <template>
69
+ <Button>Verify</Button>
70
+ </template>
71
+ ```
72
+
73
+ ## usePrimeVue
74
+
75
+ The module installs the PrimeVue plugin by default. Disable this option if you prefer to configure PrimeVue manually e.g. with a Nuxt plugin.
76
+
77
+ ```vue
78
+ primevue: {
79
+ usePrimeVue: true | false
80
+ }
81
+ ```
82
+
83
+ ## options
84
+
85
+ Main configuration settings of PrimeVue, refer to the configuration documentation for details.
86
+
87
+ ```vue
88
+ import Aura from '@primeuix/themes/aura';
89
+
90
+ export default defineNuxtConfig({
91
+ modules: [
92
+ '@primevue/nuxt-module'
93
+ ],
94
+ primevue: {
95
+ options: {
96
+ ripple: true,
97
+ inputVariant: 'filled',
98
+ theme: {
99
+ preset: Aura,
100
+ options: {
101
+ prefix: 'p',
102
+ darkModeSelector: 'system',
103
+ cssLayer: false
104
+ }
105
+ }
106
+ }
107
+ }
108
+ })
109
+ ```
110
+
111
+ ## autoImport
112
+
113
+ The auto import feature registers components automatically with tree shaking support. Defaults to true , when disabled use include/exclude options of components and directives for manual registration. Use the prefix in components and directives to add a prefix for registration.
114
+
115
+ ## importPT
116
+
117
+ Configures the global pass through import path. mycustompt.js file defines the configuration and exports it.
118
+
119
+ ## importTheme
120
+
121
+ Configures the theme configuration path for the customizations of a theme in styled mode. The mytheme.js file contains the theme configuration.
122
+
123
+ ## components
124
+
125
+ When autoImport is disabled, use the include and exclude for manual registration. The components to import and register are defined with the include option using a string array. When the value is ignored or set using the * alias, all of the components are registered. In case all components are imported, particular components can still be excluded with the exclude option. By default, for compatibility reasons, Chart and Editor components are excluded. To include them simply set the exclude option to an empty list. Use the prefix option to give a prefix to the registered component names. Component registration can be customized further by implementing the name function that gets an object representing the import metadata. name is the label of the component, as is the default export name and from is the import path.
126
+
127
+ ## directives
128
+
129
+ When autoImport is disabled, use the include and exclude for manual registration. The names of the directives to import and register are provided using the include property. When the value is ignored or set using the * alias, all of the directives are registered. Similar to components, certain directives can be excluded and name registration can be customized.
130
+
131
+ ## composables
132
+
133
+ Determines the composables to use, when default value is ignored or set as * all composables are imported.
134
+
135
+ ## Examples
136
+
137
+ Nuxt based samples with different options are available at PrimeVue examples repository.
138
+
139
+ ## Next Steps
140
+
141
+ Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library. Global configuration Customization of styles Pass through attributes Getting support
@@ -0,0 +1,137 @@
1
+ # Pass Through
2
+
3
+ The Pass Through attributes is an API to access the internal DOM Structure of the components.
4
+
5
+ ## Introduction
6
+
7
+ In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of props, events and slots. Whenever a requirement emerges for a new customization option in the API, the component author needs to develop and publish it with a new release. Vision of PrimeTek is Your components, not ours . The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The primary advantage of this approach is that it frees you from being restricted by the main component API. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific requirement. Two videos are available at PrimeTV youtube channel, first one is an introduction and second one covers a unique case that is solved by the pass-through.
8
+
9
+ ## Basic
10
+
11
+ Each component has a special pt property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the arbitrary properties to apply to the element such as styling, aria, data-* or custom attributes. If the value is a string or a function that returns a string, it is considered as a class definition and added to the class attribute of the element. Every component documentation has a dedicated section to document the available section names exposed via PT. Most common usage of pt is styling and customization. The class and style properties support the exact syntax of the corresponding Vue bindings like arrays, objects and conditionals. Example below styles an unstyled Panel component with Tailwind CSS library.
12
+
13
+ ```vue
14
+ <template>
15
+ <Panel header="Header" toggleable
16
+ :pt="{
17
+ root: 'border border-primary rounded-xl p-4',
18
+ header: (options) => ({
19
+ id: 'myPanelHeader',
20
+ style: {
21
+ 'user-select': 'none'
22
+ },
23
+ class: ['flex items-center justify-between text-primary font-bold']
24
+ }),
25
+ content: { class: 'text-primary-700 dark:text-primary-200 mt-4' },
26
+ title: 'text-xl',
27
+ toggler: () => 'bg-primary text-primary-contrast hover:text-primary hover:bg-primary-contrast'
28
+ }">
29
+ <p class="m-0">
30
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
31
+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
32
+ </p>
33
+ </Panel>
34
+ </template>
35
+ ```
36
+
37
+ ## Declarative
38
+
39
+ The declarative syntax provides an alternative to the programmatic syntax. The attributes that start with pt are interpreted differently by the component based on the format below. An IDE extension is also being planned to autocomplete the values for better developer experience in the future. Here is another example using both syntax alternatives for the same options.
40
+
41
+ ## PC Prefix
42
+
43
+ Section names prefixed with pc denote PrimeVue components, distinguishing them from standard DOM elements and indicating the necessity for a nested structure. For example, the "badge" section is identified as pcBadge because the button component incorporates the badge component internally.
44
+
45
+ ```vue
46
+ <template>
47
+ <Button
48
+ type="button"
49
+ label="Messages"
50
+ badge="2"
51
+ variant="outlined"
52
+ severity="secondary"
53
+ :pt="{
54
+ root: 'px-4! py-3!',
55
+ icon: 'text-xl! text-violet-500! dark:text-violet-400!',
56
+ label: 'text-lg! text-violet-500! dark:text-violet-400!',
57
+ pcBadge: {
58
+ root: 'bg-violet-500! dark:bg-violet-400! text-white! dark:text-black!'
59
+ }
60
+ }"
61
+ >
62
+ <template #icon="slotProps">
63
+ <Inbox v-bind="slotProps" />
64
+ </template>
65
+ </Button>
66
+ </template>
67
+
68
+ <script setup>
69
+ import Inbox from '@primeicons/vue/inbox';
70
+ <\/script>
71
+ ```
72
+
73
+ ## Lifecycle
74
+
75
+ Lifecycle hooks of components are exposed as pass through using the hooks property so that callback functions can be registered. Available callbacks are onBeforeCreate , onCreated , onBeforeUpdate , onUpdated , onBeforeMount , onMounted , onBeforeUnmount and onUnmounted . Refer to the Vue.js documentation for detailed information about lifecycle hooks.
76
+
77
+ ```vue
78
+ <template>
79
+ <Panel header="Header" :pt="panelPT">
80
+ Content
81
+ </Panel>
82
+ </template>
83
+ ```
84
+
85
+ ## Global
86
+
87
+ Defines the shared pass through properties per component type. For example, with the configuration below all panel headers have the bg-primary style class and all autocomplete components have a fixed width. These settings can be overridden by a particular component as components pt property has higher precedence over global pt .
88
+
89
+ ```vue
90
+ import { createApp } from "vue";
91
+ import PrimeVue from "primevue/config";
92
+ const app = createApp(App);
93
+
94
+ app.use(PrimeVue, {
95
+ pt: {
96
+ panel: {
97
+ header: {
98
+ class: 'bg-primary text-primary-contrast'
99
+ }
100
+ },
101
+ autocomplete: {
102
+ input: {
103
+ root: 'w-64' // OR { class: 'w-64' }
104
+ }
105
+ }
106
+ }
107
+ });
108
+ ```
109
+
110
+ ## Custom CSS
111
+
112
+ The global property has a css option to define custom css that belongs to a global pt configuration. Common use case of this feature is defining global styles and animations related to the pass through configuration.
113
+
114
+ ```vue
115
+ import { createApp } from "vue";
116
+ import PrimeVue from "primevue/config";
117
+ const app = createApp(App);
118
+
119
+ app.use(PrimeVue, {
120
+ pt: {
121
+ global: {
122
+ css: \`
123
+ .my-button {
124
+ border-width: 2px;
125
+ }
126
+ \`
127
+ },
128
+ button: {
129
+ root: 'my-button'
130
+ }
131
+ }
132
+ });
133
+ ```
134
+
135
+ ## UsePassThrough
136
+
137
+ An existing pass through configuration is customized with the usePassThrough utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the merge strategy. The mergeSections defines whether the sections from the main configuration gets added and the mergeProps controls whether to override or merge the defined props. Defaults are true for mergeSections and false for mergeProps .
@@ -0,0 +1,43 @@
1
+ # Install PrimeVue with CLT
2
+
3
+ PrimeCLT is a command line utility for Prime UI libraries. It is currently in beta state.
4
+
5
+ ## Download
6
+
7
+ PrimeCLT is available for download on npm registry .
8
+
9
+ ```vue
10
+ npm install -g primeclt
11
+ ```
12
+
13
+ ## Install
14
+
15
+ Adds PrimeVue to your existing project.
16
+
17
+ ```vue
18
+ prime vue install
19
+ ```
20
+
21
+ ## Create
22
+
23
+ Creates a new project from scratch with PrimeVue.
24
+
25
+ ```vue
26
+ prime vue create
27
+ ```
28
+
29
+ ## pf2tw
30
+
31
+ Migrates files from PrimeFlex to Tailwind CSS, see the primeflex migration for further information.
32
+
33
+ ```vue
34
+ prime pf2tw
35
+ ```
36
+
37
+ ## uninstall
38
+
39
+ Uninstall primeclt utility.
40
+
41
+ ```vue
42
+ prime uninstall
43
+ ```
@@ -0,0 +1,7 @@
1
+ # RTL Support
2
+
3
+ Right-to-left direction support of PrimeVue.
4
+
5
+ ## Configuration
6
+
7
+ The PrimeVue components natively support Right-to-Left (RTL) text direction through a modern CSS implementation utilizing FlexBox and classes like *-inline-start and *-block-end . Consequently, no JavaScript configuration is necessary; setting the document's text direction to RTL is sufficient to enable this feature. The RTL setting can either be set using the dir attribute or with the direction style property.
@@ -0,0 +1,3 @@
1
+ # Setup
2
+
3
+ Installation guides for popular development environments.