primevue

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

PrimeVue Setup and Usage

PrimeVue 配置与使用指南

Guide for configuring PrimeVue with Vue 3 and Vite projects, including auto-import setup and theming.

本文为Vue 3和Vite项目配置PrimeVue的指南，包含自动导入设置及主题配置内容。

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.).

PrimeVue是一款适用于Vue.js的完整UI套件，包含丰富的组件、图标和模板。它同时支持样式化模式（如Aura、Lara、Nora等预定义主题）和无样式模式（可通过Tailwind、Bootstrap等完全控制样式）。

Documentation

文档

Official LLM-optimized documentation: https://primevue.org/llms/pages/introduction.md

针对LLM优化的官方文档：https://primevue.org/llms/pages/introduction.md

Installation

安装

Install PrimeVue and themes:

bash

npm install primevue @primeuix/themes

安装PrimeVue及主题：

bash

npm install primevue @primeuix/themes

Plugin Configuration

插件配置

Configure PrimeVue plugin with theme in

main.ts

typescript

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')

在

main.ts

中配置PrimeVue插件及主题：

typescript

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  // 可选主题：Aura、Lara、Nora等
  }
})
app.mount('#app')

Auto Import Setup

自动导入设置

Install auto-import dependencies:

bash

npm install -D unplugin-vue-components @primevue/auto-import-resolver

Configure in

vite.config.ts

typescript

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()
      ]
    })
  ],
})

安装自动导入依赖：

bash

npm install -D unplugin-vue-components @primevue/auto-import-resolver

在

vite.config.ts

中进行配置：

typescript

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:

vue

<template>
  <Button label="Click Me" />
  <InputText v-model="value" placeholder="Enter text" />
  <DataTable :value="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// No PrimeVue component imports needed - handled by auto-import

const value = ref('')
const items = ref([])
</script>

配置自动导入后，可直接使用组件，无需手动导入：

vue

<template>
  <Button label="Click Me" />
  <InputText v-model="value" placeholder="Enter text" />
  <DataTable :value="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 无需手动导入PrimeVue组件 - 自动导入已处理

const value = ref('')
const items = ref([])
</script>

Common Components

常用组件

Button:
```
<Button label="Text" />
```
InputText:
```
<InputText v-model="value" />
```

Dropdown:

<Dropdown v-model="selected" :options="items" />

DataTable:
```
<DataTable :value="data" />
```
Dialog:
```
<Dialog v-model:visible="show" />
```

Card:

<Card><template #title>Title</template></Card>

Button：
```
<Button label="Text" />
```
InputText：
```
<InputText v-model="value" />
```

Dropdown：

<Dropdown v-model:selected" :options="items" />

DataTable：
```
<DataTable :value="data" />
```
Dialog：
```
<Dialog v-model:visible="show" />
```

Card：

<Card><template #title>Title</template></Card>

Theming

主题设置

Available preset themes:

```
Aura
```
- Modern, clean design (recommended)
```
Lara
```
- Material-inspired
```
Nora
```
- Minimalist

Import and apply in plugin configuration as shown above.

可用预设主题：

```
Aura
```
- 现代简洁设计（推荐）
```
Lara
```
- Material风格
```
Nora
```
- 极简风格

如前文所示，在插件配置中导入并应用主题。

References

参考资料

Official docs: https://primevue.org
Vite setup: https://primevue.org/llms/pages/vite.md
Auto-import: https://primevue.org/llms/pages/autoimport.md

官方文档：https://primevue.org
Vite配置指南：https://primevue.org/llms/pages/vite.md
自动导入指南：https://primevue.org/llms/pages/autoimport.md