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 a rich set of open source UI Components for Vue. See PrimeVue homepage for live showcase and documentation.

Download

PrimeVue is available at npm.

# Using npm
npm install primevue

# Using yarn
yarn add primevue

# Using pnpm
pnpm add primevue

Plugin

PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, we suggest to using the styled mode.

import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);

app.use(PrimeVue);

Theming

PrimeVue has two theming has modes; styled or unstyled.

Styled Mode

Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color.

import { createApp } from 'vue';
import PrimeVueStyled from 'primevue/config';
const app = createApp(App);

app.use(PrimeVueStyled);

Unstyled Mode

In unstyled mode, the components do not include any CSS so you'd need to style the components on your end. If you are using Tailwind CSS, visit the Tailwind Presets project to get you started with styling the components with Tailwind utility classes.

import { createApp } from 'vue';
import PrimeVueUnstyled from 'primevue/config';
const app = createApp(App);

app.use(PrimeVueUnstyled);

Usage

Each component can be imported individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component.

import Button from 'primevue/button';

const app = createApp(App);
app.component('Button', Button);

Prop Cases

Component prop names are described as camel case throughout the documentation however kebab-case is also fully supported. Events on the other hand should always be kebab-case.

<Dialog :showHeader="false"></Dialog>

<!-- can be written as -->

<Dialog :show-header="false"></Dialog>

Nuxt Integration

The nuxt-primevue package is the official module by PrimeTek. See the nuxt documentation for details. information

Example

We've created various samples for the popular options in the Vue ecosystem. Visit the primevue-examples repository for the samples.

Contributors

Changelog

4.0.6 (2024-09-10)

Full Changelog

Fixed bugs:

• animate-slidedown fails when a Tailwind prefix is used #6365
• Tree: wrong pt and classname for InputText #6301
• pt pcFilterIconContainer defects on form components #6286
• File Upload: Basic Mode does not apply buttonProps #6255
• Multiple Components: Augment vue using declare module 'vue' instead of declare module '@vue/runtime-core' (and declare module 'vue/types/vue') to avoid compilebreaks #6199