🦁

VueプロジェクトへのPrimeVueの導入設定メモ

2025/01/01に公開

新しくVueでアプリを作る際にtailwindベースでVueで使いやすそうな（v-modelでデータが渡せるとか）UIライブラリを探していたところPrimeVueを見つけたのですが、導入の設定でやることが地味に多かったりちょいちょい引っかかったのでその辺をまとめておこうと思います。

基本的には今日（2025年1月1日）現在のPrimeVueのGetting Startedを補足したような内容です。

諸々設定が終わった状態のサンプルプロジェクト:

0.主要ライブラリのバージョンなど

vue : "^3.5.13"
vite : "^6.0.5",
tailwindcss : "^3.4.17"
"primevue": "^4.2.5"

詳しくはサンプルプロジェクトのpackage.jsonを参照ください。

1. Vueの新規プロジェクト作成

まずはVueプロジェクトの作成。

npm create vue@latest

https://ja.vuejs.org/guide/quick-start

2. tailwindのインストール

tailwindはVue3への導入手順を参考に事前に設定します。

3. PrimeVueの設定

3-1. PrimeVueのインストール

npm install primevue

3-2. PrimeVue　Pluginの設定

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'
import PrimeVue from 'primevue/config'  <- 追加

createApp(App)
  .use(PrimeVue, {　 <- 追加
    theme: 'none',
  })
  .mount('#app')

3-3. PrimeVueコンポーネントのStyles設定

/src/assets/primevueディレクトリを作成する
ここから、インストールしたPrimeVueと同じバージョンのcssファイルをダウンロードし、/src/assets/primevueにすべて設置する。（本当は必要最低限でいいけれれどcssファイル間で依存してたりするので一旦全部入れておく）

3-4. Prime UI Pluginのインストール

Tailwind CSSとPrime UIのテーマを統合してくれるプラグイン。

npm i tailwindcss-primeui

3-5. tailwind.config.jsの修正

tailwind.config.jsでプラグインにtailwindcss-primeuiを設定する。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [require('tailwindcss-primeui')],    <- 追加
}

3-6. PostCSSのインストール

複数のCSSファイルをビルドしてひとまとめにしてくれるプラグイン。

npm install -D postcss-import

3-7. CSS variablesの設定(base.cssの作成)

tailwindcss-primeuiではテーマカラーなどを制御するためにCSS変数を活用しているため、「デフォルト値をグローバルのCSSで定義する」作業が必要になる。
将来的にはプラグインのアップデートにより、この手順は不要になる見込みとのこと。

/* Primary and Surface Palettes */
:root {
    --p-primary-50: #ecfdf5;
    --p-primary-100: #d1fae5;
    --p-primary-200: #a7f3d0;
    --p-primary-300: #6ee7b7;
    --p-primary-400: #34d399;
    --p-primary-500: #10b981;
    --p-primary-600: #059669;
    --p-primary-700: #047857;
    --p-primary-800: #065f46;
    --p-primary-900: #064e3b;
    --p-primary-950: #022c22;
    --p-surface-0: #ffffff;
    --p-surface-50: #fafafa;
    --p-surface-100: #f4f4f5;
    --p-surface-200: #e4e4e7;
    --p-surface-300: #d4d4d8;
    --p-surface-400: #a1a1aa;
    --p-surface-500: #71717a;
    --p-surface-600: #52525b;
    --p-surface-700: #3f3f46;
    --p-surface-800: #27272a;
    --p-surface-900: #18181b;
    --p-surface-950: #09090b;
    --p-content-border-radius: 6px;
}

/* Light */
:root {
    --p-primary-color: var(--p-primary-500);
    --p-primary-contrast-color: var(--p-surface-0);
    --p-primary-hover-color: var(--p-primary-600);
    --p-primary-active-color: var(--p-primary-700);
    --p-content-border-color: var(--p-surface-200);
    --p-content-hover-background: var(--p-surface-100);
    --p-content-hover-color: var(--p-surface-800);
    --p-highlight-background: var(--p-primary-50);
    --p-highlight-color: var(--p-primary-700);
    --p-highlight-focus-background: var(--p-primary-100);
    --p-highlight-focus-color: var(--p-primary-800);
    --p-text-color: var(--p-surface-700);
    --p-text-hover-color: var(--p-surface-800);
    --p-text-muted-color: var(--p-surface-500);
    --p-text-hover-muted-color: var(--p-surface-600);
}

/* 
 * Dark Mode
 * Defaults to system, change the selector to match the darkMode in tailwind.config.
 * For example; 
 * darkMode: ['selector', '[class*="app-dark"]'] 
 * should be;
 * :root[class="app-dark"] {
*/
@media (prefers-color-scheme: dark) {
    :root {
        --p-primary-color: var(--p-primary-400);
        --p-primary-contrast-color: var(--p-surface-900);
        --p-primary-hover-color: var(--p-primary-300);
        --p-primary-active-color: var(--p-primary-200);
        --p-content-border-color: var(--p-surface-700);
        --p-content-hover-background: var(--p-surface-800);
        --p-content-hover-color: var(--p-surface-0);
        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
        --p-highlight-color: rgba(255, 255, 255, 0.87);
        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
        --p-highlight-focus-color: rgba(255, 255, 255, 0.87);
        --p-text-color: var(--p-surface-0);
        --p-text-hover-color: var(--p-surface-0);
        --p-text-muted-color: var(--p-surface-400);
        --p-text-hover-muted-color: var(--p-surface-300);
    }
}

3-8. tailwind.cssの修正

@tailwindから@import形式に修正する
baseファイルの設定を追加する

/* Use @import */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import './base';
@import './primevue/tailwind.css';

基本的な設定はこれで完了です。

4. Buttonコンポーネントを使ってみる

こんな感じで書くと、