LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 16

【Laravel + Inertia + Vue】VILT Stackを流行らせる Advent Calendar 2025

@sigeta(しげた)

【Prime Vue】Vue3 の UI ライブラリに死ぬほど便利なものがあるんですよ

Last updated at Posted at 2025-12-15

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 は指定したテーマのメインカラーです。
（デフォはエメラルド）

image.png

これでOK。

使い方

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

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

import Button from 'primevue/button';

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

https://primevue.org/autoimport/

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

image.png

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

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

できました！

image.png

コンポーネントに付与できる属性 (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 を上書きする手法もありますが、こちらのほうがおススメです。

image.png

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

Pass Throwgh

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

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

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

image.png

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

image.png

: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 属性にしましょう。

image.png

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

{
  mergeSection: true,
  mergeProps: false,
}

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

詳細はこちらへ。

おわりに

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?