4.1 KiB

Raw Blame History

PrimeVue

PrimeVue is a rich set of open source UI Components for Vue. See PrimeVue homepage for live showcase and documentation.

Download

PrimeVue is available at npm.

// with npm
npm install primevue primeicons

// with yarn
yarn add primevue primeicons

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-blue/theme.css';

// core
import 'primevue/resources/primevue.min.css';

// icons
import 'primeicons/primeicons.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: (--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 kebap-case is also fully supported. Events on the other hand should always be kebap-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",
        "primeicons/primeicons.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
});

Example

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

Vite

Nuxt

Vue-CLI

Astro

[ application with Vue CLI is available as at github.

4.1 KiB Raw Blame History