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

PrimeVue is available for download at npm.

// with npm
npm install primevue

// with yarn
yarn add primevue

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);

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.

import "primevue/resources/themes/lara-light-indigo/theme.css";     
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);

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>

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


Open the nuxt configuration file and add the css dependencies.

export default defineNuxtConfig({
    css: [
	build: {
		transpile: ["primevue"]


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

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

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

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

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