Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (gztxsoft-vue-lib) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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: (--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
});