Installation

PrimeVue is a rich set of open source UI components for Vue.

Download #

PrimeVue is available for download at npm.


// with npm
npm install primevue

// with yarn
yarn add primevue

Plugin #

PrimeVue plugin is required to be installed with the use function to set up the default configuration.


import { createApp } from 'vue';
import PrimeVue from 'primevue/config';

const app = createApp(App);
app.use(PrimeVue);

Styles #

Theme, core and icons are the necessary css files of the components, visit the Themes section for the complete list of available themes to choose from.


//theme
import "primevue/resources/themes/lara-light-indigo/theme.css";     
    
//core
import "primevue/resources/primevue.min.css";

Each PrimeVue theme has its own font family so it is suggested to apply it to your application for a unified look.


body {
    font-family: var(--font-family);
}

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 #

PrimeVue can easily be used with Nuxt 3 using a custom plugin.

nuxt.config.js

Open the nuxt configuration file and add the css dependencies.


export default defineNuxtConfig({
    css: [
        "primevue/resources/themes/lara-light-blue/theme.css",
        "primevue/resources/primevue.css"
    ],
	build: {
		transpile: ["primevue"]
	}
})

primevue.js

Create a file like primevue.js under the plugins directory for the configuration.


import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import Button from "primevue/button";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(PrimeVue, { ripple: true });
    nuxtApp.vueApp.component("Button", Button);
    //other components that you need
});

Examples #

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

Videos #

Video tutorials to take you through step-by-step.

CreateVue #

Create-Vue is the recommended way to start a Vite-powered Vue project.

Nuxt #

Nuxt is an intuitive and extendable way to create type-safe, performant and production-grade full-stack web apps and websites with Vue.