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

PrimeVue is available at npm, if you have an existing application run the following commands to download PrimeVue and PrimeIcons to your project.

npm install primevue --save
npm install primeicons --save

Module Loader

This is the recommended way if your application uses vue-cli or has a webpack based build with vue-loader configured. Import the components as .vue files for seamless integration within your project where path of each component is available at the "import" section of a component documentation.

//import {ComponentName} from 'primevue/{componentname}';

import {Dialog} from 'primevue/dialog';

In the next step, register the component with the tag name you'd like to use.

Vue.component('Dialog', Dialog);

Then you'll be able to utilize the component in your application.

<Dialog></Dialog>

Script Tag

Other alternative is utilizing the components directly within the browser with UMD packages.

<meta charset="utf-8">
<title>calendar demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/primevue/components/calendar/calendar.umd.js"></script>

<div id="app">
  <p-calendar></p-calendar>
</div>

<script>
new Vue({
  components: {
    'p-calendar': calendar
  }
}).$mount('#app')
</script>

Dependencies

Majority of PrimeVue components (95%) are native and there are some exceptions having 3rd party dependencies such as Quill for Editor.

In addition, components require PrimeIcons library for icons.

dependencies: {
    "vue": "^2.6.10",
    "primeicons": "^1.0.0"
}

Here is the list of components with 3rd party dependencies.

Component	Dependency
Charts	Charts.js 2.1.x+
Editor	Quill.js 1.3.3+
FullCalendar	FullCalendar 4.0.2+
PrimeFlex	DataView

Styles

The css dependencies are as follows, note that you may change the theme with another one of your choice. If you are using a bundler such as webpack with a css loader you may import them to your main application component.

primevue/resources/themes/nova-light/theme.css      //theme
primevue/resources/primevue.min.css                 //shared css
primeicons/primeicons.css                           //icons

Quickstart

An example application based on vue-cli is available at GitHub.