PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
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.
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>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 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.
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 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.
PrimeVue is a rich set of open source UI Components for Vue. Visit the PrimeVue website for interactive demos, comprehensive documentation and additional resources.
4.2.0 (2024-11-01)
Deprecated:
Fixed bugs:
Implemented New Features and Enhancements:
FAQs
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
The npm package primevue receives a total of 52,416 weekly downloads. As such, primevue popularity was classified as popular.
We found that primevue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
