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

Loading Files

Load only what's relevant to your current task:

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