# PrimeVue — Rich UI Component Suite for Vue 3

> PrimeVue is a comprehensive Vue 3 UI component library with 100+ components, multiple built-in themes, and an unstyled mode for full design control.

## Install

Save as a script file and run:

# PrimeVue — Rich UI Component Suite for Vue 3

## Quick Use
```bash
npm install primevue @primevue/themes
```
```js
// main.js
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
app.use(PrimeVue, { theme: { preset: Aura } });
```
```vue
<script setup>
import Button from 'primevue/button';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';
</script>
```

## Introduction
PrimeVue is part of the PrimeTek family of UI libraries. It delivers a large set of Vue 3 components ranging from basic inputs and buttons to complex data tables, charts, and editors, all backed by multiple theme presets and a design token system.

## What PrimeVue Does
- Provides 100+ UI components for forms, data display, overlays, and menus
- Supports multiple theme presets (Aura, Lara, Nora) with light and dark variants
- Offers an unstyled (pass-through) mode for integrating with Tailwind or custom CSS
- Includes DataTable with virtual scrolling, row expansion, column reorder, and export
- Ships with a form validation integration and Figma design kit

## Architecture Overview
PrimeVue components are built with Vue 3 Composition API and use a design token system for theming. The pass-through API exposes every internal DOM element's attributes so developers can override classes, styles, and ARIA attributes without forking the source. Themes are defined as token presets that map to CSS custom properties.

## Self-Hosting & Configuration
- Install primevue and the @primevue/themes package
- Register the PrimeVue plugin in your Vue app with a theme preset
- Use the unstyled option and pass-through props for Tailwind CSS integration
- Import components individually for tree-shaking
- Add PrimeIcons or use any icon library with the icon template slots

## Key Features
- 100+ components including DataTable, TreeTable, Editor, and Chart
- Design token system with Aura, Lara, and Nora theme presets
- Pass-through API for full control over rendered HTML and classes
- Built-in accessibility with WAI-ARIA roles and keyboard navigation
- Figma UI kit for design-to-code consistency

## Comparison with Similar Tools
- **Naive UI** — TypeScript-first with fewer components but lighter weight
- **Element Plus** — similar scope, more established community for enterprise Vue
- **Vuetify** — Material Design system with opinionated layout grid
- **Quasar** — full framework including CLI and Capacitor builds
- **Ant Design Vue** — Ant Design port, enterprise focus, heavier bundle

## FAQ
**Q: Does PrimeVue support Vue 2?**
A: PrimeVue 3.x targets Vue 3 only. Older versions supported Vue 2 but are no longer maintained.

**Q: How do I use PrimeVue with Tailwind CSS?**
A: Enable unstyled mode and use the pass-through API to apply Tailwind utility classes to each component part.

**Q: Is PrimeVue free?**
A: Yes. The component library is MIT-licensed. Premium templates and the Figma kit are sold separately.

**Q: Does it work with Nuxt?**
A: Yes. The official @primevue/nuxt-module provides auto-imports and SSR support.

## Sources
- https://github.com/primefaces/primevue
- https://primevue.org/

---
Source: https://tokrepo.com/en/workflows/b79e56c9-41f2-11f1-9bc6-00163e2b0d79
Author: Script Depot