Go to file
Bahadır Sofuoğlu 32b4d9bd2d Refactor #3965 - Update Avatar data-pc-* structure 2023-05-24 12:27:18 +03:00
.github Refactor on workflows 2023-04-28 17:19:24 +01:00
.vscode update .vscode 2022-12-19 13:52:02 +03:00
api-generator Merge branch 'master' into issue-2948 2023-05-11 15:14:03 +03:00
assets Update news 2023-05-03 12:29:56 +03:00
components Refactor #3965 - Update Avatar data-pc-* structure 2023-05-24 12:27:18 +03:00
doc Update API doc 2023-05-24 08:54:58 +00:00
layouts Update doc components structure 2023-04-01 03:36:59 +01:00
middleware landing scroll top fix 2022-12-28 12:32:27 +03:00
pages Merge pull request #3845 from sezisfurkan/issue-3764 2023-05-11 14:47:09 +03:00
plugins Update doc components structure 2023-04-01 03:36:59 +01:00
public Fixed #3908 - Message: wrong close icon size 2023-04-26 14:07:08 +03:00
service Merged new Docs and Demos 2023-02-28 11:29:30 +03:00
.eslintrc.js Update .eslintrc.js 2023-02-28 10:51:46 +00:00
.gitignore update for new free 6 themes 2023-01-27 14:56:16 +03:00
.prettierignore prettier warnings fixed 2022-12-20 15:32:32 +03:00
.prettierrc.json Lint changes 2022-09-14 17:26:41 +03:00
CHANGELOG.md Update CHANGELOG.md 2023-05-15 14:16:08 +03:00
LICENSE.md Merged new Docs and Demos 2023-02-28 11:29:30 +03:00
README.md indent fix 2023-05-10 14:50:39 +03:00
app.vue Add docsearch 2023-03-04 20:18:40 +03:00
build-meta.js Refactor #3832 Refactor #3833 - Change 'primevue/icon' with 'primevue/icons' 2023-04-18 15:53:43 +03:00
error.vue Error page updated for vue warning 2023-03-21 20:34:11 +03:00
gulpfile.js Fixed #3802 - Improve folder structure for nuxt configurations 2023-03-26 06:22:57 +01:00
nuxt.config.js Cosmetic 2023-04-01 03:41:15 +01:00
package-build.json new dev iteration 2023-05-15 14:13:02 +03:00
package-lock.json Update API doc 2023-05-16 10:44:07 +00:00
package.json new dev iteration 2023-05-15 14:13:02 +03:00
rollup.config.js Refactor #3965 - Add useStyle hook for dynamic styling 2023-05-16 11:30:26 +01:00
tsconfig.json Merged new Docs and Demos 2023-02-28 11:29:30 +03:00
vite.config.js Refactor #3965 - Add useStyle hook for dynamic styling 2023-05-16 11:30:26 +01:00
vitest.config.js Add global mocks for $primevue config on test 2023-04-28 14:58:46 +01:00

README.md

License: MIT npm version Discord Chat

PrimeVue Hero

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

// 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-blue/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 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"
    ],
    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

vite

Nuxt

nuxt

Vue-CLI

vue-cli

Astro

astro

Contributors