b1870a9cc8 | ||
---|---|---|
.github | ||
.vscode | ||
api-generator | ||
assets | ||
components | ||
doc | ||
layouts | ||
middleware | ||
pages | ||
plugins | ||
public | ||
service | ||
.eslintrc.js | ||
.gitignore | ||
.prettierignore | ||
.prettierrc.json | ||
CHANGELOG.md | ||
LICENSE.md | ||
README.md | ||
app.vue | ||
build-meta.js | ||
error.vue | ||
gulpfile.js | ||
nuxt.config.js | ||
package-build.json | ||
package-lock.json | ||
package.json | ||
rollup.config.js | ||
tsconfig.json | ||
vite.config.js | ||
vitest.config.js |
README.md
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.