Vue の UI ライブラリってたくさんあるんですよ。
Vue3 になりたてはライブラリが壊滅していて大変でしたよね...。

さて他記事で説明している VILT は爆速開発に向けたスタックです。
であれば UI ライブラリも、スクリプトが組み込まれたコンポーネント型が向いてると思うんですよね。

Vue2 時代だと Vuetify 一強レベルでしたが、Vue3 になって様々なライブラリが誕生しました。（Vuetify は、Vue3 対応時期がだいぶ遅くて、あんまり見かけなくなった気がします...）
Vue3 では知名度が上がったせいか、かなり高クオリティのライブラリがたくさんあります！

ランキングはこちらで確認できます！（直近一年のスター数）

おススメ UI ライブラリ

いくつかおススメをあげると...

PrimeVue
- Tailwind でのカスタムがとても行いやすいライブラリ
- WCAG 2.1 AA level に準拠しており、非常に質が高い

Naive UI
- 地味に好きなライブラリ
- UIコンポーネントの着眼点が新鮮で、眺めるだけでも参考になる

daisyUI
- めちゃんこかわいいライブラリ
- ただデザインのみのため、ロジックは自分で組む必要がある
- React 向けの印象

色んなライブラリを使ってみましたが、上記のやつらは別格の質がありますね。

勝ち抜いた PrimeVue

そんな中、私が一番重宝しているのは PrimeVue です。

豊富なコンポーネントがあるのは大前提。
UIライブラリって、デザインのカスタマイズが難しい印象がありませんか？

PrimeVue は、「ライブラリは利用者がカスタマイズする」、という思想のもと作成されているのが特徴です。
プリセットとして Aura Material Lara Nora といった 4つのデザイントークンがあります

それに加えて、

コンポーネント内、すべてのデザインを変える仕組みがある
- （DesignToken PassThrowgh）
カラーテーマ変更に標準対応
- ダークモードもある
日本語化対応済
Figuma にも AI にも対応
WCAG 2.1 AA level に標準対応！
- 全てのコンポーネントが音声出力やキーボード操作を考慮して作られている

などなど、至れり尽くせりなライブラリなんです！

もし機能だけ用意して、デザインは自分でやりたい！といった需要があれば Unstyled Mode を使って、フルスクラッチ開発ができます。機能も自由にカスタマイズして、俺だけのUIライブラリを作りたい、といった場合は Volt UI があります。

つまり、開発者が使いたいところだけ使って、他はカスタマイズする、という素晴らしい思想のライブラリなのですよね。

ちなみに PrimeReact もあります。

インストール

今回は Tailwind Style Mode で入れます。
ついでにアイコンと日本語化も反映しましょう。

$ npm install primevue @primeuix/themes tailwindcss-primeui
$ npm install primeicons primelocale

これらを app.ts に組み込みます。
createApp の use() に PrimeVue を登録すると利用することができます。

併せてコンポーネントで利用されている、アイコンセットも import しておくと良いです。

resources/js/app.ts

    import '../css/app.css'
+   import 'primeicons/primeicons.css'
    
    import { createInertiaApp } from '@inertiajs/vue3'
    import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'
    import { createApp, h } from 'vue'
    import type { DefineComponent } from 'vue'

+   import PrimeVue from 'primevue/config'
+   import Aura from '@primeuix/themes/aura';
+   import Ja from 'primelocale/ja.json'
    
    const appName = import.meta.env.VITE_APP_NAME || 'Laravel'
    
    createInertiaApp({
      title: title => (title ? `${title} - ${appName}` : appName),
      resolve: name => resolvePageComponent(`./pages/${name}.vue`, import.meta.glob<DefineComponent>('./pages/**/*.vue')),
      setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
          .use(plugin)
+         .use(PrimeVue, {
+           theme: {
+             preset: Aura,
+           },
+           locale: Ja,
+         })
          .mount(el)
      },
      progress: {
        color: '#4B5563',
      },
    })

そして、 Tailwind に PrimeVue を登録します。

resources/css/app.css

  @import 'tailwindcss';
+  @import "tailwindcss-primeui";

  //...

これによって以下のカラーパレットが利用できるようになります！
primary は指定したテーマのメインカラーです。
（デフォはエメラルド）

これでOK。

使い方

公式サイトの Components から使いたいものを探して、コピペするだけで利用できます。
試しにボタンを使ってみましょか。

まず「Import」と書かれていることが必要なので対応します。

import Button from 'primevue/button';

もしこれが面倒な場合は、自動インポートを参照してください。
Nuxt のように import less で開発ができます！

https://primevue.org/autoimport/

「Import」の下に利用例がたくさん書いてあります。
やりたいことや Props の説明はここを読めば大体解決しますね。
詳細なコードは「<>」をクリックすると閲覧できます。
もーし検証環境がほしければ「⚡」を押してみてください！

これをコードに転記してみます。

<template>
  <Button
    icon="pi pi-home"
    label="ぼたん！"
    class="m-4"
    @click="onAlert"
  />
</template>

<script setup lang="ts">
import Button from 'primevue/button'

const onAlert = () => {
  window.alert('押しましたね？')
}
</script>

できました！

コンポーネントに付与できる属性 (Props) や、アクション (onで始まるProps) 、また利用できるスロット（Slot）は先ほどのページの「API タブ」にすべて記載されています！

他にもいろいろあるので紹介しますね。

Design Tokens

Prime Vue の何がすごいって、すべてのデザインの数値や色が CSS 変数に外出しされてるんですよね。なので、好きなようにカスタマイズができます。
これは「Theming タブ」に記載されています。

各コンポーネントのパーツは p- から始まるクラスでスタイルが指定されています。
Button だと p-button や p-button-label といったものですね。

それらは下部に記載の「Design Tokens」と書かれている変数群を利用して構築されています。
--p で始まるものです。

例えばボタンの丸みが指定されている --p-button-border-radius を変更するには、dt という属性に borderRadius をオブジェクトで渡してあげます。

  <Button
    icon="pi pi-home"
    label="ぼたん！"
    class="m-4"
    @click="onAlert"
+   :dt="{
+     borderRadius: '60px',
+   }"
  />

すると、CSSをカスタマイズしなくてもデザインを変更できてしまいます！
::deep や子孫セレクタで無理やり CSS を上書きする手法もありますが、こちらのほうがおススメです。

プロジェクト全体で変更したい場合は、以下のリンクからグローバルに定義することができます。

Pass Throwgh

とはいっても、コンポーネントの特定の部分に CSS を適用したい...といったこともありますよね？
そんな時は pt 属性を利用することができます。

例えばアイコンの大きさだけ変えたい場合を考えます。

PrimeVue では、コンポーネント内全てのパーツに名前がついています。
名前は Viewer で確認できますね。今回は icon と書かれていました。

それ以外でも dev tools で付与されている属性を確認しても分かります。
data-pc-section に書かれているものです。

:pt 属性に先ほどの icon をキーとして、Tailwind の class を指定することができます。

もしセクション名が pt で始まっていたら、キーのネストが必要になります。
https://primevue.org/passthrough/#pcprefix

  <Button
    icon="pi pi-home"
    label="ぼたん！"
    class="m-4"
    @click="onAlert"
+   :pt="{
+     icon: 'text-4xl!',
+   }"
  />

すると、該当するセクションの class に text-4xl! が増えています！
上書きが反映されないときは ! を使って !important 属性にしましょう。

デフォルトでは以下の挙動で class が結合されます。

{
  mergeSection: true,
  mergeProps: false,
}

これらは、既存のクラスに指定したクラスをどのように結合するか、という設定です。
基本的には変えないで大丈夫ですが、既存のスタイルが邪魔な場合は false にする必要があります。

詳細はこちらへ。

おわりに

PrimeVue は、なによりドキュメントがしっかりと整備されていて、使いやすいです。
超多機能のため簡単に説明しましたが、興味があればサイトを除いてみてください！

もし、コンポーネントの動作に違和感があれば、以下の GitHub から生の Vue ファイルを閲覧することができます。
気になるものは確認しましょう！