primevue

What is primevue?

PrimeVue is a comprehensive UI component library for Vue.js that provides a wide range of components to build modern, responsive, and feature-rich web applications. It includes components for forms, data display, overlays, menus, charts, messages, and more.

What are primevue's main functionalities?

Form Components

PrimeVue provides a variety of form components such as input fields, buttons, checkboxes, and more. This example demonstrates a simple form with an input field and a submit button.

<template>
  <div>
    <InputText v-model="value" placeholder="Enter your name" />
    <Button label="Submit" @click="submitForm" />
  </div>
</template>

<script>
import { InputText } from 'primevue/inputtext';
import { Button } from 'primevue/button';

export default {
  components: { InputText, Button },
  data() {
    return {
      value: ''
    };
  },
  methods: {
    submitForm() {
      console.log(this.value);
    }
  }
};
</script>

Data Display

PrimeVue offers powerful data display components like DataTable, which can be used to display and manipulate tabular data. This example shows a simple data table with product names and prices.

<template>
  <DataTable :value="products">
    <Column field="name" header="Name"></Column>
    <Column field="price" header="Price"></Column>
  </DataTable>
</template>

<script>
import { DataTable } from 'primevue/datatable';
import { Column } from 'primevue/column';

export default {
  components: { DataTable, Column },
  data() {
    return {
      products: [
        { name: 'Product 1', price: 100 },
        { name: 'Product 2', price: 200 }
      ]
    };
  }
};
</script>

Overlay Components

PrimeVue includes overlay components like Dialog, Tooltip, and OverlayPanel. This example demonstrates a simple dialog that can be shown or hidden by clicking a button.

<template>
  <div>
    <Button label="Show Dialog" @click="showDialog = true" />
    <Dialog v-model:visible="showDialog" header="Dialog Header">
      <p>Dialog Content</p>
    </Dialog>
  </div>
</template>

<script>
import { Button } from 'primevue/button';
import { Dialog } from 'primevue/dialog';

export default {
  components: { Button, Dialog },
  data() {
    return {
      showDialog: false
    };
  }
};
</script>

Menu Components

PrimeVue provides various menu components like Menubar, Menu, and ContextMenu. This example shows a simple menubar with 'Home' and 'About' menu items.

<template>
  <div>
    <Menubar :model="items" />
  </div>
</template>

<script>
import { Menubar } from 'primevue/menubar';

export default {
  components: { Menubar },
  data() {
    return {
      items: [
        { label: 'Home', icon: 'pi pi-fw pi-home' },
        { label: 'About', icon: 'pi pi-fw pi-info' }
      ]
    };
  }
};
</script>

Chart Components

PrimeVue includes chart components based on Chart.js. This example demonstrates a simple bar chart displaying sales data for three months.

<template>
  <Chart type="bar" :data="chartData" />
</template>

<script>
import { Chart } from 'primevue/chart';

export default {
  components: { Chart },
  data() {
    return {
      chartData: {
        labels: ['January', 'February', 'March'],
        datasets: [
          {
            label: 'Sales',
            backgroundColor: '#42A5F5',
            data: [65, 59, 80]
          }
        ]
      };
    };
  }
};
</script>

Other packages similar to primevue

vuetify

Vuetify is a popular Vue.js component library that follows the Material Design guidelines. It offers a wide range of components and features similar to PrimeVue, but with a focus on Material Design aesthetics.

element-plus

Element Plus is a Vue 3 UI library that provides a comprehensive set of components for building web applications. It is known for its ease of use and extensive documentation, making it a strong alternative to PrimeVue.

bootstrap-vue

BootstrapVue provides Vue.js components and directives based on Bootstrap 4. It combines the power of Bootstrap with the flexibility of Vue, offering a wide range of components similar to PrimeVue.

ant-design-vue

Ant Design Vue is a Vue.js implementation of the Ant Design system. It offers a rich set of high-quality components and follows the Ant Design guidelines, making it a strong competitor to PrimeVue.

README

PrimeVue Website

PrimeVue is a rich set of open source UI Components for Vue. Visit the PrimeVue website for interactive demos, comprehensive documentation and additional resources.

Changelog

4.3.6 (2025-07-02)

Full Changelog

Implemented New Features and Enhancements:

• Why are the Size in the documentation different from the actual code? #7855
• Rating: pass toggleCallback for slots #7854
• Fluid support for ToggleButton, SelectButton and Listbox #7835
• Accept readonly value in DataTable #7803
• Fix DataTable expander button triggering unwanted row-click events #7799
• "Select" problem: select a options with empty string value be determinded as nothing selected #7740
• Problem with DataTable cell edit and DatePicker #7710
• Calendar: Inline Calendar is jumping when selected mode is range and number of months is more then 1 #7691

Fixed bugs:

• Dialog: closeOnEscape is not working when closable is false #7867
• DataTable (Virtual Scroll): Cannot set properties of undefined (setting 'tabIndex') #7859
• Volt MultiSelect: add clearCallback #7845
• Volt DataTable: fix backdrop-blur #7844
• InputNumber with vertical showButtons receives negative margin #7840
• InputNumber : Disable Ctrl+V Input in Component when readonly is set to true #7823
• groupRowsBy - prop type error #7819
• ScrollPanel: vertical scroll bar goes outside the content div when scrollYRatio too small (<0.1) #7818
• Button - missing type declarations with asChild prop #7795
• Datepicker - "invalid" prop is not working correctly #7794
• Datatable component documentation (v4) scrolling was uncontrollable when scroll reached to 'Scroll' topic #7779
• Accordion computed id always undefined. #7776
• PickList: Reordering multiple elements breaks #7750
• DatePicker: <input> does not have "p-invalid" class on invalid #7743
• Toast onClick never fires #7732
• AutoComplete: Enter should not submit form if :typeahead="false" #7729
• InputNumber - when allowEmpty="false" component is unusable #7725
• InputNumber - suffix problems after selecting all text #7724
• Title: context missing from SelectButtonPassThroughMethodOptions type in TypeScript #7718
• AutoComplete: autoOptionFocus and space #7711
• TreeTable - Accessibility issue with role of table #7708
• Editor: Cannot see the placeholder text in dark theme #7705
• MenuBar - Accessibility issue on menu items #7704
• multiple Autocomplete Chip not showing label for numeric value "0" #7699
• FormField is missing types for $field.onInput, $field.onBlur, and $field.onChange #7697
• DatePicker & MultiSelect: esc keypress propagates and triggers close in dialogs #7661
• Volt - Use slot naming shorthand to avoid eslint warnings #7550
• Toast: Invalid emits typing #5737