What it is
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.
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.
Installation
npm install primevue primeiconsGetting started
The smallest useful thing you can do with it, and what each part means.
<template>
<Button label="Click Me" icon="pi pi-check"></Button>
</template>
<script setup>
import Button from 'primevue/button'
</script><template>
<InputText v-model="text" placeholder="Enter text" />
</template>
<script setup>
import { ref } from 'vue'
import InputText from 'primevue/inputtext'
const text = ref('')
</script>Advanced usage
Where the library earns its place over a simpler alternative.
<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><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><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>Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- 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.
Background
Why it exists, and what it was reacting to.
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.