PrimeVue Setup and Usage
Guide for configuring PrimeVue with Vue 3 and Vite projects, including auto-import setup and theming.
Overview
PrimeVue is a complete UI suite for Vue.js with rich components, icons, and templates. It supports both styled mode (pre-skinned themes like Aura, Lara, Nora) and unstyled mode (full styling control with Tailwind, Bootstrap, etc.).
Documentation
Official LLM-optimized documentation:
https://primevue.org/llms/pages/introduction.md
Installation
Install PrimeVue and themes:
npm
install
primevue @primeuix/themes
Plugin Configuration
Configure PrimeVue plugin with theme in
main.ts
:
import
{
createApp
}
from
'vue'
import
PrimeVue
from
'primevue/config'
import
Aura
from
'@primeuix/themes/aura'
import
App
from
'./App.vue'
const
app
=
createApp
(
App
)
app
.
use
(
PrimeVue
,
{
theme
:
{
preset
:
Aura
// Available: Aura, Lara, Nora, etc.
}
}
)
app
.
mount
(
'#app'
)
Auto Import Setup
Install auto-import dependencies:
npm
install
-D
unplugin-vue-components @primevue/auto-import-resolver
Configure in
vite.config.ts
:
import
{
defineConfig
}
from
'vite'
import
vue
from
'@vitejs/plugin-vue'
import
Components
from
'unplugin-vue-components/vite'
import
{
PrimeVueResolver
}
from
'@primevue/auto-import-resolver'
export
default
defineConfig
(
{
plugins
:
[
vue
(
)
,
Components
(
{
resolvers
:
[
PrimeVueResolver
(
)
]
}
)
]
,
}
)
Component Usage
With auto-import configured, use components directly without manual imports:
Common Components
Button
:
InputText
: