Setting up PrimeVue in a Vite project.
PrimeVue is available for download on npm Registry.
# Using npm
npm install primevue@4.0.0-beta.3
# Using yarn
yarn add primevue@4.0.0-beta.3
# Using pnpm
pnpm add primevue@4.0.0-beta.3
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, we suggest to using the styled mode.
Styled mode provides pre-skinned components, default theme is Aura with emerald as the primary color. See the styled mode documentation to for customization.
import { createApp } from 'vue';
import PrimeVueStyled from 'primevue/styled';
const app = createApp(App);
app.use(PrimeVueStyled);
In unstyled mode, the components do not include any CSS so you'd need to style the components on your end. Visit the Unstyled mode documentation for more information and examples.
import { createApp } from "vue";
import PrimeVueUnstyled from "primevue/config";
const app = createApp(App);
app.use(PrimeVueUnstyled);
If you are using Tailwind CSS, visit the Tailwind CSS Presets project to get you started with styling the components with Tailwind utility classes.
import { createApp } from 'vue';
import PrimeVueUnstyled from 'primevue/config';
import Lara from '@/presets/lara'; //import preset
const app = createApp(App);
app.use(PrimeVueUnstyled, {
pt: Lara //apply preset
});
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. You may also use auto imports via the unplugin-vue-components plugin.
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.