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.3 (2025-03-26)

Full Changelog

Implemented New Features and Enhancements:

• Improve Galleria component accessibility with escape to close #7435
• DataTable: The generic type parameter doesn't infer it's type from the data #7426
• VirtualScroller does not render the list when resized or when its visibility changes. #7354
• DatePicker and Select not working correctly inside a web component #7161
• fix(InputNumber): added "required" prop which is present in wrapped component (InputText) already #7063

Fixed bugs:

• VirtualScroller not working as expected #7513
• ColorPicker v-model change broken by #7291 #7503
• DataTable: paginator container slot props #7497
• ScrollTop: global passthrough options not working (reopen) #7477
• AutoComplete: Invalid prop: type check failed for prop "label" (Chip) #7476
• KeyFilter does not consider caret position during input, leading to incorrect blocking of valid values #7463
• DataTable dynamic columns memory leak #7448
• Galleria cannot focus back to previous element after hiding #7446
• The PanelMenu component with the nested active items cannot render SSR correctly #7441
• Incorrect tabpanel ID in Tab Component #7431
• DataTable: DataTableStateEvent type is inaccurate #7424
• DataTable: Stateful Tables break when loading persisted data in an invalid format #7422
• Tabs: left arrow key navigation doesn't switch to the last tab #7419
• InputNumber: Wrong caret position when user locale or currency uses comma as decimal separator #7413
• Tabs: Cannot read properties of null (reading 'style') #7410
• DataTable: Multiple select mode with filterDisplay: row broken; select all checkbox does not work #7409
• Select: When Select is used in Datatable, the value cannot be modified by clicking #7403
• Deselect of columns doesn't work after columns reordering #7399
• Autocomplete allows empty items when press Enter or Space #7396
• DataTable: Reorder feature is broken #7341
• Overlay positions in RTL #7340
• DataTable - exportFilename property not working #7305
• Add type annotations to form submit event handlers #7304
• UseStyle.js: primitive-variables, semantic-variables and global-style don't mount to <head> scope in Module Federation app rendering #6453
• Datatable should emit the restored multiSortMeta on a reload #6325
• PrimeVue Tooltip: memory leak #5856
• FileUpload: Files labeled as completed even when upload failed #5738