primevue（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.

<Button
    label="Search"
    icon="pi pi-search"
    :pt="{
        root: 'bg-teal-500 hover:bg-teal-700',
        label: 'text-white font-bold'
    }"
/>

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

Forms

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

<Form v-slot="$form" :initialValues :resolver @submit="onSubmit">
    <InputText name="username" />
    <Message v-if="$form.username?.invalid">{{ $form.username.error.message }}</Message>
    <Button type="submit" />
</Form>

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

<i class="pi pi-check"></i>
<span class="pi pi-spin pi-spinner"></span>

// Custom icon
<Select>
    <template #dropdownicon>
        <i class="fa-solid fa-chevron-down"></i>
    </template>
</Select>

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
<script src="https://unpkg.com/primevue/umd/primevue.min.js"></script>

Reference Docs

• Theming & Design Tokens
• Unstyled Mode & Pass Through
• Forms Library
• Components