Setting up PrimeVue in a Vite project.
PrimeVue is available for download on npm registry.
# Using npm
npm install primevue @primevue/themes
# Using yarn
yarn add primevue @primevue/themes
# Using pnpm
pnpm add primevue @primevue/themes
PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, and only utilized for configuration purposes.
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
const app = createApp(App);
app.use(PrimeVue);
Configure PrimeVue to use a theme like Aura.
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
const app = createApp(App);
app.use(PrimeVue, {
theme: {
preset: Aura
}
});
Verify your setup by adding a component such as Button. Each component can be imported and registered individually so that you only include what you use for bundle optimization. Import path is available in the documentation of the corresponding component.
import Button from "primevue/button"
const app = createApp(App);
app.component('Button', Button);
We've created various samples for the popular options in the Vue ecosystem. Visit the primevue-examples repository for more samples including vite-quickstart and vite-ts-quickstart.
Watch the short video tutorial from Çağatay Çivici to setup PrimeVue in styled mode with Create-Vue.
Welcome to the Prime UI Ecosystem! Once you have PrimeVue up and running, we recommend exploring the following resources to gain a deeper understanding of the library.