or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

button-components.mdconfiguration-theming.mddata-display-components.mddirectives.mdform-components.mdindex.mdlayout-components.mdnavigation-components.mdoverlay-components.mdservices-composables.mdutility-components.md
tile.json

tessl/npm-primevue

Comprehensive Vue.js UI component library with 140+ production-ready components, theming, and accessibility features

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/primevue@4.3.x

To install, run

npx @tessl/cli install tessl/npm-primevue@4.3.0

index.mddocs/

PrimeVue

PrimeVue is a comprehensive Vue.js UI component library that provides 140+ production-ready components with extensive theming capabilities, accessibility features, and enterprise-grade functionality. The library supports both Vue 2 and Vue 3, offers multiple styling approaches including styled, unstyled, and passthrough modes, and integrates seamlessly with popular CSS frameworks like Material Design, Bootstrap, and Tailwind CSS.

Package Information

  • Package Name: primevue
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install primevue

Core Imports

Import individual components for optimal tree-shaking:

import Button from "primevue/button";
import DataTable from "primevue/datatable";
import { useToast } from "primevue/usetoast";

For bulk imports (larger bundle size):

import { Button, DataTable, useToast } from "primevue";

CommonJS:

const Button = require("primevue/button");
const { useToast } = require("primevue/usetoast");

Basic Usage

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Button from 'primevue/button';
import InputText from 'primevue/inputtext';
import DataTable from 'primevue/datatable';
import Column from 'primevue/column';

const app = createApp(App);

// Install PrimeVue configuration
app.use(PrimeVue);

// Register components globally (optional)
app.component('Button', Button);
app.component('InputText', InputText);
app.component('DataTable', DataTable);
app.component('Column', Column);

app.mount('#app');

Architecture

PrimeVue is built around several key architectural patterns:

  • Component Library: 117+ Vue components covering forms, data display, layout, navigation, overlays, and utilities
  • Directive System: 7 Vue directives for cross-cutting concerns (ripple effects, tooltips, focus management)
  • Service Layer: Plugin services for global functionality (toasts, confirmations, dynamic dialogs)
  • Composable APIs: Vue 3 Composition API hooks for service integration and state management
  • Theming Engine: CSS-in-JS system with design tokens and theme customization
  • PassThrough System: Deep customization capabilities for overriding internal component markup and styles
  • Accessibility: WCAG compliant with ARIA support, keyboard navigation, and screen reader compatibility

Capabilities

Form Components

Complete form control library with 29 input components including text inputs, dropdowns, date pickers, file uploads, and validation integration.

// Text Inputs
import InputText from "primevue/inputtext";
import Textarea from "primevue/textarea";
import Password from "primevue/password";
import InputMask from "primevue/inputmask";
import InputNumber from "primevue/inputnumber";

// Selection Controls
import Dropdown from "primevue/dropdown";
import MultiSelect from "primevue/multiselect";
import Checkbox from "primevue/checkbox";
import RadioButton from "primevue/radiobutton";
import ToggleButton from "primevue/togglebutton";

// Date & Time
import Calendar from "primevue/calendar";
import DatePicker from "primevue/datepicker";

// File & Media
import FileUpload from "primevue/fileupload";
import ColorPicker from "primevue/colorpicker";

Form Components

Data Display Components

Advanced data visualization components including data tables, trees, charts, and organizational displays with sorting, filtering, and pagination.

// Data Tables
import DataTable from "primevue/datatable";
import Column from "primevue/column";
import TreeTable from "primevue/treetable";

// Lists & Trees
import Tree from "primevue/tree";
import OrderList from "primevue/orderlist";
import PickList from "primevue/picklist";

// Charts & Visualization
import Chart from "primevue/chart";
import OrganizationChart from "primevue/organizationchart";
import Timeline from "primevue/timeline";

Data Display Components

Layout Components

Structural components for organizing content including panels, accordions, tabs, splitters, and responsive containers.

// Containers
import Panel from "primevue/panel";
import Card from "primevue/card";
import Fieldset from "primevue/fieldset";
import Divider from "primevue/divider";

// Collapsible Content
import Accordion from "primevue/accordion";
import AccordionPanel from "primevue/accordionpanel";

// Tabbed Interfaces
import Tabs from "primevue/tabs";
import Tab from "primevue/tab";
import TabPanels from "primevue/tabpanels";

// Layout Utilities
import Splitter from "primevue/splitter";
import ScrollPanel from "primevue/scrollpanel";

Layout Components

Navigation Components

Navigation elements including menus, breadcrumbs, steps, and dock-style navigation with hierarchical support.

// Menus
import Menubar from "primevue/menubar";
import Menu from "primevue/menu";
import ContextMenu from "primevue/contextmenu";
import MegaMenu from "primevue/megamenu";

// Process Navigation
import Steps from "primevue/steps";
import Stepper from "primevue/stepper";
import Breadcrumb from "primevue/breadcrumb";

// Special Navigation
import Dock from "primevue/dock";
import TabMenu from "primevue/tabmenu";

Navigation Components

Button Components

Button controls with various styles, grouping, split actions, and floating action buttons.

import Button from "primevue/button";
import ButtonGroup from "primevue/buttongroup";
import SplitButton from "primevue/splitbutton";
import SpeedDial from "primevue/speeddial";
import SelectButton from "primevue/selectbutton";

Button Components

Overlay Components

Modal dialogs, drawers, popovers, and overlay panels for displaying contextual content and collecting user input.

// Dialogs
import Dialog from "primevue/dialog";
import ConfirmDialog from "primevue/confirmdialog";
import DynamicDialog from "primevue/dynamicdialog";

// Side Panels
import Drawer from "primevue/drawer";
import Sidebar from "primevue/sidebar";

// Popups
import OverlayPanel from "primevue/overlaypanel";
import Popover from "primevue/popover";
import ConfirmPopup from "primevue/confirmpopup";

Overlay Components

Service Layer

Global services for managing toasts, confirmations, dynamic dialogs, and terminal interfaces with both plugin and composable APIs.

// Vue 3 Composables
import { useToast } from "primevue/usetoast";
import { useConfirm } from "primevue/useconfirm";
import { useDialog } from "primevue/usedialog";

// Plugin Services
import ToastService from "primevue/toastservice";
import ConfirmationService from "primevue/confirmationservice";
import DialogService from "primevue/dialogservice";
import TerminalService from "primevue/terminalservice";

Services & Composables

Directives

Vue directives for adding interactive behaviors like ripple effects, tooltips, focus management, and keyboard filtering.

import Ripple from "primevue/ripple";
import Tooltip from "primevue/tooltip";
import BadgeDirective from "primevue/badgedirective";
import FocusTrap from "primevue/focustrap";
import StyleClass from "primevue/styleclass";
import KeyFilter from "primevue/keyfilter";
import AnimateOnScroll from "primevue/animateonscroll";

Directives

Utility Components

Helper components for progress indication, loading states, messages, avatars, and various UI utilities.

// Progress & Loading
import ProgressBar from "primevue/progressbar";
import ProgressSpinner from "primevue/progressspinner";
import Skeleton from "primevue/skeleton";
import BlockUI from "primevue/blockui";

// Messages & Feedback
import Toast from "primevue/toast";
import Message from "primevue/message";
import InlineMessage from "primevue/inlinemessage";

// Visual Elements
import Avatar from "primevue/avatar";
import Badge from "primevue/badge";
import Chip from "primevue/chip";
import Tag from "primevue/tag";

Utility Components

Configuration & Theming

Global configuration, theme management, styling utilities, and PassThrough system for deep customization.

import PrimeVue from "primevue/config";
import { useStyle } from "primevue/usestyle";
import { usePassThrough } from "primevue/passthrough";

// Style imports for components
import "primevue/resources/themes/aura-light-green/theme.css";
import "primevue/resources/primevue.min.css";
import "primeicons/primeicons.css";

Configuration & Theming

Types

Core type definitions used throughout the PrimeVue ecosystem:

// PassThrough system for deep customization
interface PassThroughOptions {
  mergeSections?: boolean;
  mergeProps?: boolean;
}

// Common component properties
interface BaseComponentProps {
  pt?: object;
  ptOptions?: PassThroughOptions;
  unstyled?: boolean;
}

// Menu item structure for navigation components
interface MenuItem {
  label?: string;
  icon?: string;
  command?: (event: MenuItemCommandEvent) => void;
  url?: string;
  items?: MenuItem[];
  disabled?: boolean;
  visible?: boolean;
  target?: string;
  separator?: boolean;
  badge?: string;
  badgeClass?: string;
  class?: string;
  style?: any;
}

// Event interfaces
interface MenuItemCommandEvent {
  originalEvent: Event;
  item: MenuItem;
}