---
# System prepended metadata

title: PrimeVue
tags: [環境相關]

---

# PrimeVue

## 先使用 Vite 建立 VUE 環境之後
{%preview https://hackmd.io/@63Ywhax5TLKtGhFSWnacvQ/rJWPxmpNel %}

## 安裝 PrimeVue
PrimeVue 可在npm registry下載
```
npm install primevue @primeuix/themes
```

### Plugin

```
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';

const app = createApp(App);
app.use(PrimeVue);
```

### Theme

```
import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primeuix/themes/aura';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});
```

## + Taillwind

{%preview https://primevue.org/tailwind/ %}

```
npm i tailwindcss-primeui
```

### 在包含 tailwindcss 導入的 CSS 檔案中，也加入tailwindcss-primeui導入。

這是v3的寫法，v4已改

```
@import "tailwindcss";
@import "tailwindcss-primeui";
```

### 使用 Tailwind 設定檔中的插件選項來設定插件。

這是v3的寫法，v4已改，v4沒有tailwind.config.js

```
// tailwind.config.js
import PrimeUI from 'tailwindcss-primeui';

export default {
    // ...
    plugins: [PrimeUI]
};
```
