Setting up PrimeVue in a Vite project.
PrimeVue is available for download on npm Registry.
# Using npm
npm install primevue
# Using yarn
yarn add primevue
# Using pnpm
pnpm add primevue
PrimeVue plugin is required to be installed as an application plugin to set up the default configuration. The plugin is lightweight, only sets up the configuration object without affecting your application. PrimeVue has two styling modes; Styled and Unstyled. If you are just getting started, begin with the styled mode.
Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the styled mode documentation for details.
Install the @primevue/themes add-on package as the themes are not included in PrimeVue by default.
# Using npm
npm install @primevue/themes
# Using yarn
yarn add @primevue/themes
# Using pnpm
pnpm add @primevue/themes
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
}
});
In unstyled mode, the components do not include any CSS so you'd need to style the components on your end, this is especially useful when building your own UI library on top of PrimeVue. Visit the Unstyled mode documentation for more information and examples.
import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);
app.use(PrimeVue, {
unstyled: true
});
Each component can be imported and registered individually so that you only bundle what you use. Import path is available in the documentation of the corresponding component. If you prefer importing components automatically with tree-shaking support , view the autoimport guide.
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.