# Primevue

> Use when building UI with PrimeVue components — covers setup, configuration, theming, forms, inputs, buttons, data, overlays, menus, layout, media, directives, accessibility, migration, and Pass Through for Vue 3 / Nuxt projects

- Skill: `jonaskahn/primevue` (Agent Skill, multi-file: 16 files)
- Install (CLI): `npx skillmds@latest add jonaskahn/primevue`
- Raw SKILL.md: https://api.skillmd.com/api/skills/jonaskahn/primevue/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT
- Author: jonaskahn (https://skillmd.com/u/jonaskahn)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/jonaskahn/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](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

```ts
// 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')
```

```vue
<!-- 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