@primevue/mcp 4.5.5 → 5.0.0-rc.2

package/data/llms/llms.txt

@@ -0,0 +1,132 @@
+# PrimeVue
+
+## Guides
+
+- [Auto Import](https://primevue.dev/autoimport): On-demand PrimeVue components with auto imports and tree-shaking.
+- [Install PrimeVue with CDN](https://primevue.dev/cdn): Setting up PrimeVue in a project using CDN.
+- [Configuration](https://primevue.dev/configuration): Application wide configuration for PrimeVue.
+- [Custom Icons](https://primevue.dev/customicons): PrimeVue components can be used with any icon library using the templating features.
+- [Accessibility](https://primevue.dev/guides/accessibility): PrimeVue has WCAG level compliance, refer to the accessibility documentation of each component for detailed information.
+- [Animations](https://primevue.dev/guides/animations): Various PrimeVue Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations.
+- [RTL Support](https://primevue.dev/guides/rtl): Right-to-left direction support of PrimeVue.
+- [Icons](https://primevue.dev/icons): @primeicons/vue is the default icon library of PrimeVue with over 300 icons as standalone Vue components developed by PrimeTek. The library is optional as PrimeVue components can use any icon with templating.
+- [Installation](https://primevue.dev/installation): How to set up PrimeVue in your project. Select your framework to get started.
+- [Install PrimeVue with Laravel](https://primevue.dev/laravel): Setting up PrimeVue in a Laravel project.
+- [LLMs.txt](https://primevue.dev/llms): LLM-optimized documentation endpoints for PrimeVue components.
+- [MCP Server](https://primevue.dev/mcp): Model Context Protocol (MCP) server for PrimeVue component library. Provides AI assistants with comprehensive access to PrimeVue component documentation.
+- [Migration](https://primevue.dev/migration/v4): Migration guide to PrimeVue v4.
+- [Migration to v5](https://primevue.dev/migration/v5): Migration guide to PrimeVue v5.
+- [Install PrimeVue with Nuxt](https://primevue.dev/nuxt): Setting up PrimeVue in a Nuxt project.
+- [Pass Through](https://primevue.dev/passthrough): The Pass Through attributes is an API to access the internal DOM Structure of the components.
+- [Install PrimeVue with CLT](https://primevue.dev/primeclt): PrimeCLT is a command line utility for Prime UI libraries. It is currently in beta state.
+- [Tailwind CSS](https://primevue.dev/tailwind): Integration between PrimeVue and Tailwind CSS both in styled and unstyled modes.
+- [Styled Mode](https://primevue.dev/theming/styled): Choose from a variety of pre-styled themes or develop your own.
+- [Unstyled Mode](https://primevue.dev/theming/unstyled): Theming PrimeVue with alternative styling approaches.
+- [UI Kit](https://primevue.dev/uikit): Design files for PrimeVue Components.
+- [Install PrimeVue with Vite](https://primevue.dev/vite): Setting up PrimeVue in a Vite project.
+
+## Components
+
+- [Accordion](https://primevue.dev/accordion): Accordion groups a collection of contents in tabs.
+- [AnimateOnScroll](https://primevue.dev/animateonscroll): AnimateOnScroll is used to apply animations to elements when entering or leaving the viewport during scrolling.
+- [AutoComplete](https://primevue.dev/autocomplete): AutoComplete is an input component that provides real-time suggestions when being typed.
+- [Avatar](https://primevue.dev/avatar): Avatar represents people using icons, labels and images.
+- [Badge](https://primevue.dev/badge): Badge is a small status indicator for another element.
+- [BlockUI](https://primevue.dev/blockui): BlockUI can either block other components or the whole page.
+- [Breadcrumb](https://primevue.dev/breadcrumb): Breadcrumb provides contextual information about page hierarchy.
+- [Button](https://primevue.dev/button): Button is an extension to standard button element with icons and theming.
+- [Card](https://primevue.dev/card): Card is a flexible container component.
+- [Carousel](https://primevue.dev/carousel): Carousel is a content slider featuring various customization options.
+- [CascadeSelect](https://primevue.dev/cascadeselect): CascadeSelect displays a nested structure of options.
+- [Chart](https://primevue.dev/chart): Chart components are based on Chart.js, an open source HTML5 based charting library.
+- [Checkbox](https://primevue.dev/checkbox): Checkbox is an extension to standard checkbox element with theming.
+- [Chip](https://primevue.dev/chip): Chip represents entities using icons, labels and images.
+- [ColorPicker](https://primevue.dev/colorpicker): ColorPicker is an input component to select a color.
+- [CommandMenu](https://primevue.dev/commandmenu): CommandMenu is a search-driven command palette component.
+- [Compare](https://primevue.dev/compare): Compare two items side by side with a slider.
+- [ConfirmDialog](https://primevue.dev/confirmdialog): ConfirmDialog is backed by a service utilizing Observables to display confirmation windows easily that can be shared by multiple actions on the same component.
+- [ConfirmPopup](https://primevue.dev/confirmpopup): ConfirmPopup displays a confirmation overlay displayed relatively to its target.
+- [ContextMenu](https://primevue.dev/contextmenu): ContextMenu displays an overlay menu on right click of its target.
+- [DataTable](https://primevue.dev/datatable): DataTable displays data in tabular format.
+- [DataView](https://primevue.dev/dataview): DataView displays data in grid or list layout with pagination and sorting features.
+- [DatePicker](https://primevue.dev/datepicker): DatePicker is a form component to work with dates.
+- [DeferredContent](https://primevue.dev/deferredcontent): DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.
+- [Dialog](https://primevue.dev/dialog): Dialog is a container to display content in an overlay window.
+- [Divider](https://primevue.dev/divider): Divider is used to separate contents.
+- [Dock](https://primevue.dev/dock): Dock is a navigation component consisting of menuitems.
+- [Drawer](https://primevue.dev/drawer): Drawer is a panel component displayed as an overlay at the edges of the screen.
+- [Dynamic Dialog](https://primevue.dev/dynamicdialog): Dialogs can be created dynamically with any component as the content using a DialogService.
+- [Editor](https://primevue.dev/editor): Editor is rich text editor component based on Quill.
+- [Fieldset](https://primevue.dev/fieldset): Fieldset is a grouping component with a content toggle feature.
+- [FileUpload](https://primevue.dev/fileupload): FileUpload is an advanced uploader with dragdrop support, multi file uploads, auto uploading, progress tracking and validations.
+- [FloatLabel](https://primevue.dev/floatlabel): FloatLabel appears on top of the input field when focused.
+- [Fluid](https://primevue.dev/fluid): Fluid is a layout component to make descendant components span full width of their container.
+- [Focus Trap](https://primevue.dev/focustrap): Focus Trap keeps focus within a certain DOM element while tabbing.
+- [Forms](https://primevue.dev/forms): The PrimeVue Forms library provides comprehensive form state management with built-in validation support.
+- [Galleria](https://primevue.dev/galleria): Galleria is a content gallery component.
+- [Gallery](https://primevue.dev/gallery): Gallery is an image viewer with zoom, rotate, flip and download capabilities.
+- [IconField](https://primevue.dev/iconfield): IconField wraps an input and an icon.
+- [IftaLabel](https://primevue.dev/iftalabel): IftaLabel is used to create infield top aligned labels.
+- [Image](https://primevue.dev/image): Displays an image with preview and tranformation options.
+- [ImageCompare](https://primevue.dev/imagecompare): Compare two images side by side with a slider.
+- [Inplace](https://primevue.dev/inplace): Inplace provides an easy to do editing and display at the same time where clicking the output displays the actual content.
+- [InputColor](https://primevue.dev/inputcolor): InputColor is a composable color picker component.
+- [InputGroup](https://primevue.dev/inputgroup): Text, icon, buttons and other content can be grouped next to an input.
+- [InputMask](https://primevue.dev/inputmask): InputMask component is used to enter input in a certain format such as numeric, date, currency and phone.
+- [InputNumber](https://primevue.dev/inputnumber): InputNumber is an input component to provide numerical input.
+- [InputOtp](https://primevue.dev/inputotp): Input Otp is used to enter one time passwords.
+- [InputPassword](https://primevue.dev/inputpassword): InputPassword is an enhanced input for password entry with strength metering, mask toggling, and controlled or uncontrolled usage.
+- [InputTags](https://primevue.dev/inputtags): InputTags is used to enter multiple tags.
+- [InputText](https://primevue.dev/inputtext): InputText is an extension to standard input element with icons and theming.
+- [KeyFilter](https://primevue.dev/keyfilter): KeyFilter is a directive to restrict individual key strokes. In order to restrict the whole input, use InputNumber or InputMask instead.
+- [Knob](https://primevue.dev/knob): Knob is a form component to define number inputs with a dial.
+- [Label](https://primevue.dev/label): Label provides accessible text labels for form controls. Use the for attribute to link the label to a form control by its id.
+- [Listbox](https://primevue.dev/listbox): Listbox is used to select one or more values from a list of items.
+- [Mask](https://primevue.dev/mask): Mask is a directive used to enter input in a certain format such as numeric, date, currency, email and phone.
+- [MegaMenu](https://primevue.dev/megamenu): MegaMenu is navigation component that displays submenus together.
+- [Menu](https://primevue.dev/menu): Menu is a navigation / command component that supports dynamic and static positioning.
+- [Menubar](https://primevue.dev/menubar): Menubar is a horizontal menu component.
+- [Message](https://primevue.dev/message): Message component is used to display inline messages.
+- [MeterGroup](https://primevue.dev/metergroup): MeterGroup displays scalar measurements within a known range.
+- [MultiSelect](https://primevue.dev/multiselect): MultiSelect is used to select multiple items from a collection.
+- [OrderList](https://primevue.dev/orderlist): OrderList is used to sort a collection.
+- [OrganizationChart](https://primevue.dev/organizationchart): OrganizationChart visualizes hierarchical organization data.
+- [Paginator](https://primevue.dev/paginator): Paginator displays data in paged format and provides navigation between pages.
+- [Panel](https://primevue.dev/panel): Panel is a container component with an optional content toggle feature.
+- [PanelMenu](https://primevue.dev/panelmenu): PanelMenu is a hybrid of Accordion and Tree components.
+- [Password](https://primevue.dev/password): Password displays strength indicator for password fields.
+- [PickList](https://primevue.dev/picklist): PickList is used to reorder items between different lists.
+- [Popover](https://primevue.dev/popover): Popover is a container component that can overlay other components on page.
+- [ProgressBar](https://primevue.dev/progressbar): ProgressBar is a process status indicator.
+- [ProgressSpinner](https://primevue.dev/progressspinner): ProgressSpinner is a process status indicator that supports both determinate and indeterminate modes.
+- [RadioButton](https://primevue.dev/radiobutton): RadioButton is an extension to standard radio button element with theming.
+- [Rating](https://primevue.dev/rating): Rating component is a star based selection input.
+- [Ripple](https://primevue.dev/ripple): Ripple directive adds ripple effect to the host element.
+- [ScrollArea](https://primevue.dev/scrollarea): ScrollArea is a cross browser, lightweight and themable alternative to native browser scrollbar.
+- [ScrollPanel](https://primevue.dev/scrollpanel): ScrollPanel is a cross browser, lightweight and skinnable alternative to native browser scrollbar.
+- [ScrollTop](https://primevue.dev/scrolltop): ScrollTop gets displayed after a certain scroll position and used to navigates to the top of the page quickly.
+- [Select](https://primevue.dev/select): Select is used to choose an item from a collection of options.
+- [SelectButton](https://primevue.dev/selectbutton): SelectButton is used to choose single or multiple items from a list using buttons.
+- [Sidebar](https://primevue.dev/sidebar): Sidebar is a compound navigation panel with collapsible icon mode, offcanvas mode, variants and optional overlay.
+- [Skeleton](https://primevue.dev/skeleton): Skeleton is a placeholder to display instead of the actual content.
+- [Slider](https://primevue.dev/slider): Slider is a component to provide input by dragging a handle along a track.
+- [Speed Dial](https://primevue.dev/speeddial): SpeedDial is a floating button with a popup menu.
+- [SplitButton](https://primevue.dev/splitbutton): SplitButton groups a set of commands in an overlay with a default command.
+- [Splitter](https://primevue.dev/splitter): Splitter is utilized to separate and resize panels.
+- [Stepper](https://primevue.dev/stepper): The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.
+- [StyleClass](https://primevue.dev/styleclass): StyleClass manages CSS classes declaratively to during enter/leave animations or just to toggle classes on an element.
+- [Tabs](https://primevue.dev/tabs): Tabs is a container component to group content with tabs.
+- [Tag](https://primevue.dev/tag): Tag component is used to categorize content.
+- [Terminal](https://primevue.dev/terminal): Terminal is a text-based interface component that emulates a command line experience, enabling users to enter commands and receive responses.
+- [Textarea](https://primevue.dev/textarea): Textarea adds styling and autoResize functionality to standard textarea element.
+- [TieredMenu](https://primevue.dev/tieredmenu): TieredMenu displays submenus in nested overlays.
+- [Timeline](https://primevue.dev/timeline): Timeline visualizes a series of chained events.
+- [Toast](https://primevue.dev/toast): Toast is used to display messages in an overlay.
+- [ToggleButton](https://primevue.dev/togglebutton): ToggleButton is used to select a boolean value using a button.
+- [ToggleSwitch](https://primevue.dev/toggleswitch): ToggleSwitch is used to select a boolean value.
+- [Toolbar](https://primevue.dev/toolbar): Toolbar is a grouping component for buttons and other content.
+- [Tooltip](https://primevue.dev/tooltip): Tooltip directive provides advisory information for a component. Tooltip is integrated within various PrimeVue components.
+- [Tree](https://primevue.dev/tree): Tree is used to display hierarchical data.
+- [TreeSelect](https://primevue.dev/treeselect): TreeSelect is a form component to choose from hierarchical data.
+- [TreeTable](https://primevue.dev/treetable): TreeTable is used to display hierarchical data in tabular format.
+- [VirtualScroller](https://primevue.dev/virtualscroller): VirtualScroller is a performant approach to render large amounts of data efficiently.

package/data/llms/pages/accessibility.md

@@ -0,0 +1,27 @@
+# Accessibility
+
+PrimeVue has WCAG level compliance, refer to the accessibility documentation of each component for detailed information.
+
+## Introduction
+
+According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to ensure content can be consumed by anyone. Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories; Visual Impairments Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers are required to make sure content is readable by the readers. Popular readers are NVDA , JAWS and ChromeVox . Hearing Impairments Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing textual alternatives, transcripts and captions for content with audio. Mobility Impairments People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad remain as solutions for people who are not able to utilize a mouse. Cognitive Impairments Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive impairments result in better design for any user.
+
+## WCAG
+
+Correct page structure with the aid of assistive technologies are the core ingridients for an accessible web content. HTML is based on an accessible foundation, form controls can be used by keyboard by default and semantic HTML is easier to be processed by a screen reader. WCAG refers to Web Content Accessibility Guideline , a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible. PrimeVue components aim high level of WCAG compliancy in the near future. Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are Section 508 in the US and Web Accessibility Directive of the European Union.
+
+## Form Controls
+
+Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with space key as well to trigger.
+
+## Semantic HTML
+
+HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular div elements with classes are used. Consider the following example that do not mean too much for readers.
+
+## WAI ARIA
+
+ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as a datepicker or colorpicker has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeVue. These types of components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized. ARIA consists of roles, properties and attributes. Roles define what the element is mainly used for e.g. checkbox , dialog , tablist whereas States and Properties define the metadata of the element like aria-checked , aria-disabled . Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.
+
+## Colors
+
+Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration. Good Contrast Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples. GOOD BAD Vibration Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration. VIBRATE Dark Mode Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred. Indigo 500 Indigo 200

package/data/llms/pages/animations.md

@@ -0,0 +1,119 @@
+# Animations
+
+Various PrimeVue Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations.
+
+## Introduction
+
+Various PrimeVue Components utilize native CSS animations to provide an enhanced user experience. The default animations are based on the best practices recommended by the usability experts. In case you need to customize the default animations, this documentation covers the entire set of built-in animations. Animations are defined using a combination of style classes and keyframes. The ⁠ .{classname}-enter-active and ⁠ .{classname}-leave-active classes specify the animation name, duration, and easing function. You can customize animations globally by overriding the default animation classes, affecting all components. Alternatively, you can apply scoped classes to individual components to modify their animations independently. For demo purposes, this second approach is used throughout the next sections.
+
+## Anchored Overlays
+
+Anchored overlays are the components that have a floating ui positioned relatively to another element such as Select, Popover. The enter and leave animations are defined with the .p-anchored-overlay-enter-active and .p-anchored-overlay-leave-active classes.
+
+```vue
+.p-anchored-overlay-enter-active {
+    animation: demo-overlay-in 300ms ease-out;
+}
+
+.p-anchored-overlay-leave-active {
+    animation: demo-overlay-out 250ms ease-in;
+}
+
+@keyframes demo-overlay-in {
+    from {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+}
+
+@keyframes demo-overlay-out {
+    to {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+}
+```
+
+## Collapsibles
+
+Collapsible components have a content that is toggleable including Accordion, Panel, Fieldset, Stepper and PanelMenu. The enter and leave animations are defined with the .p-collapsible-enter-active and .p-collapsible-leave-active classes.
+
+```vue
+.p-collapsible-enter-active {
+    animation: demo-collapsible-expand 500ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+.p-collapsible-leave-active {
+    animation: demo-collapsible-collapse 500ms cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+@keyframes demo-collapsible-expand {
+    from {
+        opacity: 0;
+        grid-template-rows: 0fr;
+        transform: scale(0.93);
+    }
+    to {
+        opacity: 1;
+        grid-template-rows: 1fr;
+    }
+}
+
+@keyframes demo-collapsible-collapse {
+    from {
+        opacity: 1;
+        grid-template-rows: 1fr;
+    }
+    to {
+        opacity: 0;
+        grid-template-rows: 0fr;
+        transform: scale(0.93);
+    }
+}
+```
+
+## Dialog
+
+Overlays such as Dialog and Drawer are positioned relative to the viewport and have their own animations.
+
+```vue
+.p-dialog-enter-active {
+    animation: demo-dialog-in 500ms ease-out;
+}
+
+.p-dialog-leave-active {
+    animation: demo-dialog-out 500ms ease-in;
+}
+
+@keyframes demo-dialog-in {
+    from {
+        opacity: 0;
+        transform: translateY(-10%) scale(1.1);
+        filter: blur(10px);
+    }
+}
+
+@keyframes demo-dialog-out {
+    to {
+        opacity: 0;
+        transform: translateY(200%) rotate(-90deg);
+    }
+}
+```
+
+## Disable
+
+Individual animations can be reduced and even disabled completely using the animation duration.
+
+```vue
+@media (prefers-reduced-motion: reduce) {
+    .p-anchored-overlay-enter-active,
+    .p-anchored-overlay-leave-active {
+        animation-duration: 0s !important;
+    }
+}
+```
+
+## Reference
+
+List of class names of the CSS animations used by the components. Component Enter Class Leave Class Accordion .p-collapsible-enter-active .p-collapsible-leave-active AutoComplete .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active CascadeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ColorPicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ConfirmPopup .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active ContextMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active DatePicker .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Dialog .p-dialog-enter-active .p-dialog-leave-active Drawer .p-drawer-enter-active .p-drawer-leave-active Fieldset .p-collapsible-enter-active .p-collapsible-leave-active Galleria .p-galleria-enter-active .p-galleria-leave-active Image .p-image-original-enter-active .p-image-original-leave-active Menu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Message .p-message-enter-active .p-message-leave-active Modal Masks .p-overlay-mask-enter-active .p-overlay-mask-leave-active MultiSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Panel .p-collapsible-enter-active .p-collapsible-leave-active PanelMenu .p-collapsible-enter-active .p-collapsible-leave-active Password .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Select .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active Stepper .p-collapsible-enter-active .p-collapsible-leave-active TieredMenu .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active TreeSelect .p-anchored-overlay-enter-active .p-anchored-overlay-leave-active

package/data/llms/pages/autoimport.md

@@ -0,0 +1,28 @@
+# Auto Import
+
+On-demand PrimeVue components with auto imports and tree-shaking.
+
+## Overview
+
+PrimeVue components need to be imported and configured individually. In the next section, we'll cleanup the code using auto imports.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+import App from './App.vue'
+const app = createApp(App);
+
+app.use(PrimeVue);
+app.component('InputText', InputText);
+app.component('Button', Button);
+```
+
+## Unplugin
+
+The unplugin-vue-components library can automatically import and register PrimeVue components with the help of @primevue/auto-import-resolver . Begin with installing the packages as dev dependencies. Next step would be adding the PrimeVueResolver at vite.config using the Components plugin. That's it, now the initialization code can be refactored as the following. For configuration like namespacing, visit the official documentation .
+
+## Example
+
+A complete example using PrimeVue with auto imports is available at the playground .

package/data/llms/pages/cdn.md

@@ -0,0 +1,72 @@
+# Install PrimeVue with CDN
+
+Setting up PrimeVue in a project using CDN.
+
+## Script
+
+You can use PrimeVue and Vue.js from a CDN with a script tag. This approach does not involve any build step, and is suitable for enhancing static HTML. This guide uses unpkg however other providers such as jsdeliver and cdnjs can also be used.
+
+```vue
+https://unpkg.com/vue@3/dist/vue.global.js
+https://unpkg.com/primevue@5.0.0-rc.2/umd/primevue.min.js
+https://unpkg.com/@primeuix/themes@3.0.0-rc.1/umd/aura.js  // see theming for alternatives
+```
+
+## Theming
+
+Include the theme preset via a script element after adding PrimeVue, valid options are Aura, Lara, Nora and Material.
+
+## License
+
+Get your PrimeUI license key which is required for the setup process.
+
+## CreateApp
+
+A complete example using a PrimeVue DatePicker.
+
+```vue
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>PrimeVue + CDN</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width" />
+    </head>
+    <body>
+        <script src="https://unpkg.com/vue@3/dist/vue.global.js"><\/script>
+        <script src="https://unpkg.com/primevue/umd/primevue.min.js"><\/script>
+        <script src="https://unpkg.com/@primeuix/themes/umd/aura.js"><\/script>
+
+        <div id="app">
+            <p-datepicker v-model="date"></p-datepicker>
+            <br /><br />
+            {{ date }}
+        </div>
+
+        <script>
+            const { createApp, ref } = Vue;
+
+            const app = createApp({
+                setup() {
+                    const date = ref();
+
+                    return {
+                        date
+                    };
+                },
+            });
+
+            app.use(PrimeVue.Config, {
+                theme: {
+                    preset: PrimeUIX.Themes.Aura
+                },
+                license: 'PRIMEUI-LICENSE-KEY'
+            });
+
+            app.component('p-datepicker', PrimeVue.DatePicker);
+
+            app.mount('#app');
+        <\/script>
+    </body>
+</html>
+```

package/data/llms/pages/configuration.md

@@ -0,0 +1,158 @@
+# Configuration
+
+Application wide configuration for PrimeVue.
+
+## Import
+
+Configuration is managed by the PrimeVue instance imported from primevue/config .
+
+```vue
+import PrimeVue from 'primevue/config';
+const app = createApp(App);
+
+app.use(PrimeVue, { /* options */ });
+```
+
+## License
+
+The PrimeUI license key , can be either a free community license or a commercial license.
+
+```vue
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    license: 'PRIMEUI-LICENSE-KEY'
+});
+```
+
+## Theme
+
+Style mode offers theming based on a design token based architecture. See the styled mode documentation for details such as building your own theme.
+
+```vue
+import PrimeVue from 'primevue/config';
+import Aura from '@primeuix/themes/aura';
+
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    theme: {
+        preset: Aura,
+        options: {
+            prefix: 'p',
+            darkModeSelector: 'system',
+            cssLayer: false,
+            cssVariables: true
+        }
+    }
+});
+```
+
+## Unstyled
+
+Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit Unstyled mode documentation for more information.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { unstyled: true });
+```
+
+## Pass Through
+
+Defines the shared pass through properties per component type. Visit the Pass Through Props documentation for more information.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    pt: {
+        slider: {
+            handle: { class: 'bg-primary text-primary-contrast' }
+        }
+    }
+});
+```
+
+## Pass Through Options
+
+Used to configure the ptOptions properties of components and the usePassThrough method. 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 .
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    ptOptions: {
+        mergeSections: true,
+        mergeProps: false
+    }
+});
+```
+
+## Ripple
+
+Ripple is an optional animation for the supported components such as buttons. It is disabled by default and needs to be enabled at your app's entry file (e.g. main.js) during the PrimeVue setup.
+
+```vue
+import { createApp } from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { ripple: true });
+```
+
+## InputVariant
+
+Input fields come in two styles, default is outlined with borders around the field whereas filled alternative adds a background color to the field. Applying p-variant-filled to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class. Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree, to resolve this case set inputVariant to filled at PrimeVue configuration as well.
+
+```vue
+import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, { inputVariant: "filled" });
+```
+
+## ZIndex
+
+ZIndexes are managed automatically to make sure layering of overlay components work seamlessly when combining multiple components. Still there may be cases where you'd like to configure the configure default values such as a custom layout where header section is fixed. In a case like this, dropdown needs to be displayed below the application header but a modal dialog should be displayed above. PrimeVue configuration offers the zIndex property to customize the default values for components categories. Default values are described below and can be customized when setting up PrimeVue.
+
+```vue
+import {createApp} from "vue";
+import PrimeVue from "primevue/config";
+const app = createApp(App);
+
+app.use(PrimeVue, {
+    zIndex: {
+        modal: 1100,        //dialog, drawer
+        overlay: 1000,      //select, popover
+        menu: 1000,         //overlay menus
+        tooltip: 1100       //tooltip
+    }
+});
+```
+
+## Nonce
+
+The nonce value to use on dynamically generated style elements in core.
+
+## Set Locale
+
+Second parameter of the use function can be used to initiate the locale during PrimeVue installation. The locale configuration is reactive so that any changes are instantly reflected in the UI. Suppose you are doing a multi language application and need to change the language dynamically.
+
+## Repository
+
+Ready to use settings for locales are available at the community supported PrimeLocale repository. We'd appreciate if you could contribute to this repository with pull requests and share it with the rest of the community.
+
+## API
+
+Configuration is managed by the Locale API imported from primevue/config . Locale Options Key Value startsWith Starts with contains Contains notContains Not contains endsWith Ends with equals Equals notEquals Not equals noFilter No Filter lt Less than lte Less than or equal to gt Greater than gte Greater than or equal to dateIs Date is dateIsNot Date is not dateBefore Date is before dateAfter Date is after clear Clear apply Apply matchAll Match All matchAny Match Any addRule Add Rule removeRule Remove Rule accept Yes reject No choose Choose upload Upload cancel Cancel completed Completed pending Pending fileSizeTypes ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'] dayNames ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' dayNamesShort ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' dayNamesMin ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa' monthNames ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' monthNamesShort ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' chooseYear Choose Year chooseMonth Choose Month chooseDate Choose Date prevDecade Previous Decade nextDecade Next Decade prevYear Previous Year nextYear Next Year prevMonth Previous Month nextMonth Next Month prevHour Previous Hour nextHour Next Hour prevMinute Previous Minute nextMinute Next Minute prevSecond Previous Second nextSecond Next Second am am pm pm today Today weekHeader Wk firstDayOfWeek 0 showMonthAfterYear false dateFormat mm/dd/yy weak Weak medium Medium strong Strong passwordPrompt Enter a password searchMessage {0} results are available selectionMessage {0} items selected emptySelectionMessage No selected item emptySearchMessage No results found fileChosenMessage {0} files noFileChosenMessage No file chosen emptyMessage No available options aria.trueLabel True aria.falseLabel False aria.nullLabel Not Selected aria.star 1 star aria.stars {star} stars aria.selectAll All items selected aria.unselectAll All items unselected aria.close Close aria.previous Previous aria.next Next aria.navigation Navigation aria.scrollTop Scroll Top aria.moveTop Move Top aria.moveUp Move Up aria.moveDown Move Down aria.moveBottom Move Bottom aria.moveToTarget Move to Target aria.moveToSource Move to Source aria.moveAllToTarget Move All to Target aria.moveAllToSource Move All to Source aria.pageLabel Page {page} aria.firstPageLabel First Page aria.lastPageLabel Last Page aria.nextPageLabel Next Page aria.prevPageLabel Previous Page aria.rowsPerPageLabel Rows per page aria.jumpToPageDropdownLabel Jump to Page Dropdown aria.jumpToPageInputLabel Jump to Page Input aria.selectRow Row Selected aria.unselectRow Row Unselected aria.expandRow Row Expanded aria.collapseRow Row Collapsed aria.showFilterMenu Show Filter Menu aria.hideFilterMenu Hide Filter Menu aria.filterOperator Filter Operator aria.filterConstraint Filter Constraint aria.editRow Row Edit aria.saveEdit Save Edit aria.cancelEdit Cancel Edit aria.listView List View aria.gridView Grid View aria.slide Slide aria.slideNumber {slideNumber} aria.zoomImage Zoom Image aria.zoomIn Zoom In aria.zoomOut Zoom Out aria.rotateRight Rotate Right aria.rotateLeft Rotate Left

package/data/llms/pages/contribution.md

@@ -0,0 +1,31 @@
+# Contribution Guide
+
+Welcome to the PrimeVue Contribution Guide and thank you for considering contributing.
+
+## Benefits
+
+Contributing to PrimeVue comes with several benefits. Being part of an open-source project will enhance your career and open up exciting opportunities. Contributors and Committers will be listed on our team page . You'll gain significant visibility in the developer community while improving yourself as a professional. You'll be invited to a private communication channel at Discord to get in touch with PrimeTek. In addition, contributors have access to all PrimeVue add-ons like Premium Templates, Blocks, and UI Kit free of charge.
+
+## CLA
+
+When a community member is offered the Contributor role, they are expected to sign a Contributor License Agreement (CLA) for legal purposes. This helps protect both the contributor and PrimeTek.
+
+## Communication
+
+Join the Contributors channel on the PrimeLand Discord server to connect with PrimeVue staff and fellow contributors. In this channel, you can discuss the areas you want to contribute to and receive feedback. This channel is open to everyone who'd like to contribute.
+
+## Help Needed
+
+PrimeVue is a community-driven project backed by the expertise and sponsorship of PrimeTek, and we appreciate any help you can provide. Here are some areas where you can contribute: Issue Triage Help us manage issues by; Reproducing reported bugs Clarifying issue descriptions Tagging issues with appropriate labels Sending Pull Requests We encourage you to send pull requests, especially for issues tagged with the help-needed label. Community Support Assist other users by participating in the issue tracker, GitHub discussions , and the PrimeLand Discord server. Your expertise can help others solve problems and improve their experience with PrimeVue.
+
+## Introduction
+
+PrimeVue is a popular Vue UI library maintained by PrimeTek, a company renowned for its comprehensive set of UI components for various frameworks. PrimeTek is dedicated to providing high-quality, versatile, and accessible UI components that help developers build better applications faster. Development Setup To begin with, clone the PrimeVue repository from GitHub: Then run the showcase in your local environment at http://localhost:3000/ . Project Structure PrimeVue utilizes a monorepo architecture, the libraries are located at packages folder and the website is at apps/showcase .
+
+## Key Points
+
+PrimeVue has several add-ons such as UI Kit, Premium Templates, and Blocks that rely on design tokens and styling. Any core structural changes, such as adding new props, events, or updating design tokens, should be communicated with the core team to ensure consistency and compatibility.
+
+## Pathway
+
+PrimeTek offers an organization structure involving contributors and the core team: Contributor Role After a certain period of frequent contributions, a community member is offered the Contributor role. On average, it may take about three months, but the exact duration can vary depending on the individual commitment. Committer Role If a contributor actively participates in the codebase and PRs, their role may be upgraded to a Committer level, providing direct commit access to the PrimeVue codebase. Employment PrimeTek prefers to hire team members from open source committers, so you may be offered a full-time position when a position becomes available.