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. See PrimeVue homepage for live showcase and documentation.
PrimeVue is available at npm.
# Using npm
npm install primevue
# Using yarn
yarn add primevue
# Using pnpm
pnpm add primevue
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);
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);
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);
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>
The nuxt-primevue package is the official module by PrimeTek. See the nuxt documentation for details. information
We've created various samples for the popular options in the Vue ecosystem. Visit the primevue-examples repository for the samples.
4.0.4 (2024-08-02)
Fixed bugs:
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 256,132 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
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.
Security News
NIST's new password guidelines remove periodic changes and special character requirements, focusing on longer, more secure passwords for better authentication practices.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.