PrimeVue 框架

PrimeVue 是一套專為 Vue.js 打造的完整 UI 元件庫，由 PrimeTek 開發，提供超過 80 種可自訂的元件，涵蓋表單、資料展示、導航、對話框、圖表等，適用於各種規模的前端應用程式。

---

🔧 主要特色

✅ 元件豐富且模組化

• 涵蓋表單控制項（如 InputText、Checkbox）、資料表格（DataTable）、圖表（整合 Chart.js）、對話框（Dialog）、導航選單（Menu）、媒體展示（Carousel、Galleria）等。
• 支援按需引入，減少打包體積，提升效能。

🎨 主題與樣式自訂

• Styled Mode：內建多種主題（如 Aura、Lara、Nora），可快速套用一致的設計風格。
• Unstyled Mode：提供無樣式版本，讓開發者可完全自訂樣式，並與 Tailwind CSS、Bootstrap、Bulma 等 CSS 框架整合。([primevue.org][2])

🧩 PassThrough API

透過 PassThrough API，開發者可存取元件內部的 DOM 元素，添加自訂屬性、事件或樣式，提升元件的可擴展性與靈活性。

♿ 無障礙支援

符合 WCAG 2.1 AA 等級的無障礙標準，並提供詳細的鍵盤操作與螢幕閱讀器支援說明，確保應用程式對所有使用者友善。([primevue.org][2])

🧱 附加資源

• PrimeBlocks：超過 500 個預設的 UI 區塊，可直接複製貼上，快速建立應用程式介面。
• Figma UI Kit：提供與 PrimeVue 元件一致的 Figma 設計資源，方便設計與開發協作。
• Theme Designer：可視化主題設計工具，支援自訂設計變數，並與 Figma 同步。([primevue.org][3])

---

🚀 快速開始

安裝 PrimeVue

使用 Vite 建立的 Vue 3 專案中，可透過以下指令安裝 PrimeVue：([LogRocket Blog][4])

npm install primevue primeicons

設定與引入元件

在 main.js 或 main.ts 中引入 PrimeVue 並註冊所需元件：([LogRocket Blog][4])

import { createApp } from 'vue';
import App from './App.vue';

import PrimeVue from 'primevue/config';
import Button from 'primevue/button';

import 'primevue/resources/themes/lara-light-indigo/theme.css'; // 主題
import 'primevue/resources/primevue.min.css';                   // 核心樣式
import 'primeicons/primeicons.css';                             // 圖示

const app = createApp(App);
app.use(PrimeVue);
app.component('Button', Button);

app.mount('#app');

在模板中即可使用 PrimeVue 的元件：

<Button label="送出"/>

---

📚 延伸學習資源

• 官方網站與文件：https://primevue.org/
• GitHub 倉庫：https://github.com/primefaces/primevue
• 教學影片：PrimeVue - The Complete UI Library for Vue Ecosystem([GitHub][9], [YouTube][10])