PrimeVue

Language: JavaScript

UI Framework

PrimeVue is part of the PrimeTek component suite (which includes PrimeNG and PrimeFaces). It was created to bring enterprise-grade UI components to Vue.js developers, emphasizing flexibility, responsiveness, and rich functionality.

PrimeVue is a rich set of open-source UI components for Vue.js applications. It provides a variety of ready-to-use components like buttons, tables, charts, forms, dialogs, and more with modern design and accessibility support.

Installation

npm: npm install primevue primeicons

yarn: yarn add primevue primeicons

manual: Import PrimeVue components individually and include theme CSS in your main.js or main.ts.

Usage

PrimeVue provides Vue 3 components that can be used in templates. Components support props, events, slots, and theming. You can import individual modules to reduce bundle size.

Button usage

<template>
  <Button label="Click Me" icon="pi pi-check"></Button>
</template>

<script setup>
import Button from 'primevue/button'
</script>

Creates a PrimeVue button with a label and icon.

InputText component

<template>
  <InputText v-model="text" placeholder="Enter text" />
</template>

<script setup>
import { ref } from 'vue'
import InputText from 'primevue/inputtext'
const text = ref('')
</script>

A simple input field with reactive binding using PrimeVue InputText component.

DataTable component

<template>
  <DataTable :value="cars">
    <Column field="vin" header="Vin" />
    <Column field="year" header="Year" />
    <Column field="brand" header="Brand" />
  </DataTable>
</template>

<script setup>
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
const cars = [
  { vin: 'A123', year: 2020, brand: 'Toyota' },
  { vin: 'B456', year: 2019, brand: 'Honda' }
]
</script>

Displays a table of data using PrimeVue DataTable and Column components.

Dialog component

<template>
  <Button label="Show" @click="display=true" />
  <Dialog header="Dialog" v-model:visible="display">
    <p>Content inside the dialog.</p>
  </Dialog>
</template>

<script setup>
import { ref } from 'vue'
import Button from 'primevue/button'
import Dialog from 'primevue/dialog'
const display = ref(false)
</script>

Demonstrates opening a modal dialog using PrimeVue Dialog component.

Dropdown component

<template>
  <Dropdown :options="cities" v-model="selectedCity" placeholder="Select a City" />
</template>

<script setup>
import { ref } from 'vue'
import Dropdown from 'primevue/dropdown'
const selectedCity = ref(null)
const cities = [
  { label: 'New York', value: 'NY' },
  { label: 'London', value: 'LDN' }
]
</script>

Provides a dropdown selection using PrimeVue Dropdown component.

Error Handling

Component not styled: Ensure PrimeVue theme CSS and PrimeIcons CSS are imported.

Component not rendered: Verify the component is properly imported and registered in your Vue app.

v-model not working: Ensure the reactive variable is defined using `ref` or `reactive`.

Best Practices

Import only the components you need to reduce bundle size.

Use reactive variables with `v-model` for two-way binding.

Leverage slots for customizing component content.

Apply themes from PrimeVue for consistent UI styling.

Refer to documentation for events and properties of each component.

Official Docs Github