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.5 (2025-06-02)

Full Changelog

Implemented New Features and Enhancements:

• Select: hitting ENTER when filter focused and no results breaks focus #7613

Fixed bugs:

• VirtualScroller: bind resize event defect #7694
• Splitter: resetState not working with size == 0 #7687
• Toast message disappears as soon as mouse leaves #7683
• DataTable: Adding columns causes a double render #7677
• VirtualScroller items not visible using v-show #7666
• Forms: add setFieldValue null check #7479
• Can't delete password from Password field when InitialValue is present #7331
• Theme prefix config not applying CSS variables as expected #7258