Primevue

PrimeVue

Comprehensive reference for PrimeVue component library in Vue 3 and Nuxt projects, structured from the official LLM docs.

Docs: https://primevue.dev | MCP server: https://primevue.dev/mcp | LLMs.txt: https://primevue.dev/llms

When to Use

• Adding or configuring any PrimeVue component, directive, composable, or service
• Setting up PrimeVue in Vite, Nuxt, Laravel, CDN, or auto-import environments
• Customizing themes, Tailwind integration, unstyled mode, design tokens, or Pass Through
• Building forms with @primevue/forms
• Using @primeicons/vue icons
• Handling accessibility, RTL, animations, migration, or PrimeVue-specific gotchas

Available Guidance

• references/setup.md — Installation, Vite/Nuxt/Laravel/CDN setup, auto-import, app-wide config, services, icons
• references/theming.md — Styled mode, presets, design tokens, dark mode, Tailwind, unstyled mode, runtime theme utilities
• references/catalog.md — All PrimeVue guide and component pages from llms.txt, grouped by category with import paths
• references/inputs.md — Form controls: InputText, Select, MultiSelect, AutoComplete, DatePicker, Checkbox, RadioButton, Slider, TreeSelect, labels
• references/buttons-status.md — Button, SplitButton, ToggleButton, Tag, Badge, Message, ProgressBar, ProgressSpinner, MeterGroup, Toast status patterns
• references/overlay.md — Dialog, Drawer, Popover, ConfirmDialog, Toast, DynamicDialog, useConfirm/useToast composables
• references/data.md — DataTable (sort, filter, pagination, row selection, virtual scroll), TreeTable, DataView, Paginator
• references/forms.md — @primevue/forms Form/FormField, resolvers (Zod, Yup, Valibot), validation, submission
• references/passthrough.md — Pass Through API, global PT, component-level PT, usePassThrough utility
• references/navigation.md — Menu, Menubar, MegaMenu, PanelMenu, TieredMenu, Breadcrumb, TabMenu, Steps, Dock
• references/panels-layout.md — Card, Panel, Fieldset, Accordion, Tabs, Stepper, Divider, Splitter, Toolbar, Fluid, ScrollArea/ScrollPanel
• references/media-file.md — Image, Gallery/Galleria, ImageCompare/Compare, Carousel, FileUpload, Avatar, Editor, Chart
• references/directives-misc.md — Ripple, Tooltip, StyleClass, AnimateOnScroll, FocusTrap, KeyFilter, Mask, BlockUI, DeferredContent, Inplace, Terminal
• references/accessibility.md — WCAG patterns, labels, keyboard support, overlay focus management, RTL, locale aria strings
• references/migration.md — PrimeVue version migration notes and compatibility checks

Loading Files

Load only what's relevant to your current task:

• references/setup.md — if installing PrimeVue or editing config
• references/theming.md — if customizing theme, colors, dark mode
• references/catalog.md — if unsure which PrimeVue page/component/import applies
• references/inputs.md — if using input, select, date, checkbox, radio, labels, sliders, or pickers
• references/buttons-status.md — if using buttons, badges, tags, messages, progress, or status indicators
• references/overlay.md — if using Dialog, Drawer, Toast, or confirmation
• references/data.md — if using DataTable, TreeTable, or DataView
• references/forms.md — if using @primevue/forms with validation
• references/passthrough.md — if customizing internal component DOM/classes
• references/navigation.md — if building menus or navigation
• references/panels-layout.md — if composing layout, panels, tabs, accordions, or scroll containers
• references/media-file.md — if displaying media, charts, rich text, carousels, or file uploads
• references/directives-misc.md — if using PrimeVue directives, utilities, blocking, deferred content, or terminal
• references/accessibility.md — if implementing labels, keyboard/focus behavior, RTL, or locale aria text
• references/migration.md — if upgrading PrimeVue or resolving version-specific API changes

DO NOT load all files at once. Load only what's relevant.

Quick Start

// main.ts (Vite)
import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primevue/themes/aura'
import Button from 'primevue/button'
import 'primeicons/primeicons.css'

const app = createApp(App)
app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: { darkModeSelector: '.dark' }
  }
})
app.component('Button', Button)
app.mount('#app')

<!-- Basic usage -->
<Button label="Save" icon="pi pi-check" @click="save" />
<Select v-model="selected" :options="items" optionLabel="name" placeholder="Pick one" />
<DataTable :value="rows" paginator :rows="10">
  <Column field="name" header="Name" sortable />
  <Column field="status" header="Status" />
</DataTable>

Key Conventions

• Import components from primevue/<component-name> (lowercase, no spaces); verify special cases in references/catalog.md
• Icons via pi pi-<name> class string or @primeicons/vue standalone components
• All components support pt prop for Pass Through customization
• severity prop on many components: primary | secondary | success | info | warn | danger | contrast
• size prop: small | large (default is medium)
• v-model binding follows standard Vue patterns; use modelValue + update:modelValue for manual wiring
• Check the exact component page via https://primevue.dev/<slug>.md when an uncommon prop, slot, event, or PT section is needed