All libraries
PrimeVue logo

PrimeVue

primevue.org

The most complete UI component suite for Vue — 90+ components, themes, and blocks.

Component Library
Stacks
VueTypeScript
Use cases
DashboardsRapid Prototyping

Installation

npm
npm install primevue @primeuix/themes
pnpm
pnpm add primevue @primeuix/themes
Icons (optional)
npm install @primeicons/vue
Forms add-on
npm install @primevue/forms
Auto imports (dev)
npm install -D unplugin-vue-components @primevue/auto-import-resolver
Nuxt module (dev)
npm install --save-dev @primevue/nuxt-module

Getting started

  1. Requires Vue 3.5 or newer — `@primevue/core` declares a `vue: ^3.5.0` peer dependency. Install the library plus a theme: `npm install primevue @primeuix/themes`.
  2. Register the plugin in the app entry file and pass a theme preset. This is the step people miss, and components render unstyled without it: `import PrimeVue from 'primevue/config'; import Aura from '@primeuix/themes/aura'; app.use(PrimeVue, { theme: { preset: Aura } });`
  3. v5 is published under the PrimeUI License, a Community/Commercial model, so add `license: 'PRIMEUI-LICENSE-KEY'` to the same options object. Releases on the `v4-stable` npm tag remain MIT.
  4. Import each component from its own path, for example `import Button from 'primevue/button'`. The full Vite walkthrough is at https://primevue.dev/vite.
  5. On Nuxt, install `@primevue/nuxt-module` instead of wiring the plugin by hand — it registers PrimeVue and auto-imports components with tree shaking: https://primevue.dev/nuxt.

Agent setup prompt

Paste this into a coding agent to set PrimeVue up in an existing project.

Add PrimeVue to this existing Vue project.

PrimeVue (https://primevue.dev) is a design-agnostic component library for Vue 3.5+. Styling is decoupled from the components and supplied by a theme preset from @primeuix/themes, so both the plugin registration and the preset are required before anything renders correctly.

Prerequisites:
- The project is a Vue 3 app (Vite, Nuxt or plain). Confirm `vue` resolves to 3.5 or newer — @primevue/core declares a `vue: ^3.5.0` peer dependency.
- Node.js with npm, pnpm or yarn. If the project has no build step at all, use the CDN guide at https://primevue.dev/cdn instead.

Steps:
1. Install the library and a theme: npm install primevue @primeuix/themes.
2. Register the plugin in the app entry file. This is the step that is easy to skip, and without it components ship no styles: import PrimeVue from 'primevue/config'; import Aura from '@primeuix/themes/aura'; app.use(PrimeVue, { theme: { preset: Aura } });
3. Add the license key. v5 is published under the PrimeUI License, a Community/Commercial model, so pass license: 'PRIMEUI-LICENSE-KEY' in the same options object. If this project needs the MIT-licensed releases instead, pin the v4-stable npm tag.
4. Import components individually from their own paths, for example import Button from 'primevue/button', and confirm the app still builds. Optional: switch to auto imports with unplugin-vue-components and @primevue/auto-import-resolver (https://primevue.dev/autoimport/).
5. For forms, install the add-on with npm install @primevue/forms and use the Form component with a name-based state model and a resolver (https://primevue.dev/forms/). On Nuxt, install @primevue/nuxt-module instead of steps 2 and 4 (https://primevue.dev/nuxt).

Read the docs before guessing: appending .md to any docs URL returns Markdown (for example https://primevue.dev/vite.md), an MCP server is documented at https://primevue.dev/mcp/, and running samples live at https://github.com/primefaces/primevue-examples. Theming details, including the 16px base font size and the per-preset `-compat` variants for apps still on a 14px root, are at https://primevue.dev/theming/styled/.

Use only props, events and theme tokens documented on those pages. Note that v5 deprecated a number of v4 APIs (MultiSelect, Galleria, ColorPicker, Password, Chart, Editor and the @primevue/icons package among them) — the list is at https://primevue.dev/migration/v5/.