primevue

PrimeVue

PrimeVue is a next-generation Vue.js UI component suite by PrimeTek. Features 100+ components, design token-based theming, and unstyled mode for Tailwind/CSS integration.

Quick Start

npm install primevue @primevue/themes

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
    theme: { preset: Aura, options: { darkModeSelector: '.dark' } },
    ripple: true
});

Core Concepts

Two Styling Modes

Styled Mode (default): Pre-skinned components with design token theming. Built-in presets: Aura, Material, Lara, Nora.

Unstyled Mode: Components render without styles, fully styled via Pass Through (pt) with Tailwind, Bootstrap, or custom CSS.

Pass Through (pt)

Access internal DOM of any component to add arbitrary attributes, classes, aria, or events — no need to wait for component API updates.

Design Tokens

Three-tier token system: primitive (raw values like colors) → semantic (meaningful names like primary.color) → component (per-component like button.background).

Popular Components

| Component | Tag | Use Case | |-----------|-----|----------| | Button | | Actions, submit | | DataTable | | Tabular data with sorting/filtering | | Dialog |

| Modal overlay | | InputText | | Text input | | Dropdown | | Single selection | | MultiSelect | | Multiple selection | | Toast | | Notifications | | Menu | | Navigation/list | | Dialog |

| Overlay content | | Card | | Content container | | Panel | | Collapsible content | | Toolbar | | Button grouping |

Forms

PrimeVue Forms library (@primevue/forms) provides state management with built-in validation.

    
    {{ $form.username.error.message }}
    

Resolvers available for: Zod, Yup, Joi, Valibot, Superstruct.

Configuration

app.use(PrimeVue, {
    ripple: true,              // Enable ripple effect
    inputVariant: 'filled',    // 'outlined' | 'filled'
    unstyled: false,           // Enable unstyled mode globally
    theme: {
        preset: Aura,
        options: {
            prefix: 'p',
            darkModeSelector: '.dark',
            cssLayer: false
        }
    },
    pt: { /* global pass-through */ },
    zIndex: {
        modal: 1100,
        overlay: 1000,
        menu: 1000,
        tooltip: 1100
    }
});

Theming

Use Built-in Preset

import Aura from '@primeuix/themes/aura';
app.use(PrimeVue, { theme: { preset: Aura } });

Customize Preset

import { definePreset } from '@primeuix/themes';
const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {
            50: '{indigo.50}',
            500: '{indigo.500}',
            // ... 50-950
        },
        colorScheme: {
            light: { surface: { 0: '#fff' } },
            dark: { surface: { 0: '#1a1a1a' } }
        }
    }
});
app.use(PrimeVue, { theme: { preset: MyPreset } });

Runtime Updates

import { updatePreset, usePreset } from '@primeuix/themes';
updatePreset({ semantic: { primary: { 500: '#f59e0b' } } });
usePreset(MyPreset);  // Replace entirely

Icons

// Custom icon

Installation Options

# Vite
npm create vite@latest my-app -- --template vue
npm install primevue @primevue/themes
Nuxt
npm install @primeuix/nuxt
Laravel
npm install primevue @primevue/themes
Follow Laravel integration guide
CDN

Reference Docs

Theming & Design Tokens

Unstyled Mode & Pass Through

Forms Library

Components

npm install primevue @primevue/themes

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
    theme: { preset: Aura, options: { darkModeSelector: '.dark' } },
    ripple: true
});

app.use(PrimeVue, {
    ripple: true,              // Enable ripple effect
    inputVariant: 'filled',    // 'outlined' | 'filled'
    unstyled: false,           // Enable unstyled mode globally
    theme: {
        preset: Aura,
        options: {
            prefix: 'p',
            darkModeSelector: '.dark',
            cssLayer: false
        }
    },
    pt: { /* global pass-through */ },
    zIndex: {
        modal: 1100,
        overlay: 1000,
        menu: 1000,
        tooltip: 1100
    }
});