primevue-skilld

PrimeVue（[email protected]）

バージョン 5.0.1、準備済みソース input/source/package.json。Vue 3 向け UI コンポーネントライブラリです。 ドキュメント：https://primevue.dev（コンポーネントのページは https://primevue.dev/<name> にあります。例：https://primevue.dev/inputtags/）。

v5 の重要な情報

1. ライセンスキーが必要です。 v5 は PrimeUI デュアルライセンス（無料の Community または有料の Commercial）で提供されています。プラグインのインストール時に、license 文字列オプションとしてキーを渡してください。検証はオフラインで行われます。キーがない場合、無効な場合、または期限切れの場合は、ライセンス通知が表示されることがあります（input/source/LICENSE.md）。
2. v4 からの公開 API の破壊的変更はありません。 公式移行ガイド（https://primevue.dev/migration/v5/）によると、v4 で非推奨となった API は v5 でも引き続き動作し、v6 で削除されます。新しいコードでは、v5 changes に記載されている置き換え先を使用してください。
3. ルートフォントの基準サイズは 16px です。 v5 はドキュメントのルートを 16px と想定します。v4 では 14px を想定していました。すべてのプリセットに、14px レイアウト用の -compat バリアントが用意されており、2027 年 6 月まで保守されます（https://primevue.dev/theming/styled/）。
4. 設定プラグイン。 app.use で一度インストールします。primevue/config のデフォルトエクスポートは、パッケージのルートから Config としても再エクスポートされています（input/source/index.mjs:139）。

セットアップ

// main.js
import { createApp } from 'vue';
import PrimeVue from 'primevue/config'; // or: import { Config } from 'primevue'
import Aura from '@primeuix/themes/aura';
import App from './App.vue';

const app = createApp(App);
app.use(PrimeVue, {
    license: '<your PrimeUI license key>',
    ripple: true, // optional, disabled by default
    theme: {
        preset: Aura,
        options: {
            darkModeSelector: '.app-dark' // default is 'system'
        }
    }
});

詳細：テーマオプション、ロケール、unstyled モード、Nuxt モジュール、自動インポートについては setup を参照してください。

インポートパターン

<script setup>
// Tree-shakeable subpath imports (package.json exports map "./*")
import Button from 'primevue/button';
import Select from 'primevue/select';
// Style classes for a component (design token CSS)
import SelectStyle from 'primevue/select/style';
</script>

• from 'primevue' でのルートインポートも使用でき、すべてのコンポーネント、スタイル、サービス、コンポーザブルがエクスポートされます（input/source/index.mjs）。
• アイコン：SVG アイコンコンポーネントは @primeicons/vue からインポートします（input/source/package.json の依存関係 ^8.0.0）。@primevue/icons パッケージは v5 で非推奨になりました。

基本ルール

• 新しいコードで非推奨のコンポーネントを使用しないでください。 v5 で非推奨（v6 で削除）：MultiSelect、Galleria、Image、ColorPicker、ImageCompare、ScrollPanel、Password、InputMask（コンポーネント）、PanelMenu、Chart、Editor、multiple を指定した AutoComplete、value で制御する Carousel、scrollable を指定した Tabs。置き換え先は v5 changes の表を参照してください。
• ボタンのコンテンツはデフォルトスロットで構成します。 label、icon、iconPos、iconClass、badge、badgeClass、badgeSeverity、loading、loadingIcon の各 props は v5.0.0 以降、すべて非推奨です（input/source/button/index.d.ts）。
• props 主導のテンプレートより複合コンポーネントを使用してください：Tabs/TabList/Tab/TabPanels/TabPanel、Accordion/AccordionPanel/AccordionHeader/AccordionContent、Stepper ファミリー、Sidebar ファミリー、Gallery ファミリー、Carousel ファミリー。アクティブ状態は v-model:value でバインドします（Accordion の activeIndex prop とイベントは v5 で削除されました）。
• オーバーレイは Teleport ベースです：appendTo="body"（デフォルト）または "self" を設定してください。ほとんどのオーバーレイコンポーネントは overlayStyle/overlayClass を受け付けます（panel* props は v5 で削除されました）。
• CSS の上書きよりデザイントークンを優先してください：:deep() やスタイルクラスの代わりに、スコープ付きトークンには dt prop を使用し、プリセットのカスタマイズには definePreset を使用してください（https://primevue.dev/theming/styled/）。

よくあるタスク

Button（スロットによる構成）

<Button severity="contrast" size="small">
    <i class="pi pi-check" />
    <span>Confirm</span>
    <Badge value="2" />
</Button>

スロット内のアイコンの順序で iconPos を置き換えます。loading の代わりに disabled と独自のスピナーを使用してください。

複数選択（MultiSelect の置き換え）

<Select v-model="selectedCities" multiple :options="cities" optionLabel="name" fluid />

Select の multiple（「指定すると、複数の値を選択できます」、input/source/select/index.d.ts）。

タグ入力（AutoComplete multiple の置き換え）

<InputTags v-model="tags" typeahead :suggestions="suggestions" @complete="search" delimiter="," />

主な props：max、allowDuplicate、addOnBlur、addOnPaste、addOnTab、delimiter（文字列または RegExp）。add、remove、option-select、complete を emit します（input/source/inputtags/index.d.ts）。

Toast サービス

// main.js: app.use(ToastService)
import { useToast } from 'primevue/usetoast';
const toast = useToast();
toast.add({ severity: 'info', summary: 'Saved', life: 3000 });

サービスのメソッド：add、remove、removeGroup、removeAllGroups（input/source/toastservice/index.d.ts）。ConfirmationService + useConfirm と DialogService + useDialog（動的ダイアログ）も同じパターンです。

マスクディレクティブ（InputMask コンポーネントの置き換え）

<InputText v-mask="{ mask: '99-9999', unmask: true }" v-model="value" />

オプション：mask、slotChar（デフォルトは _）、autoClear（デフォルトは true）、unmask、{ value, rawValue } を受け取る onChange（input/source/mask/index.d.ts）。

アプリのサイドバー（複合コンポーネント）

<SidebarLayout>
    <SidebarAside>
        <SidebarHeader>…</SidebarHeader>
        <SidebarContent>
            <SidebarGroup>
                <SidebarGroupLabel>Admin</SidebarGroupLabel>
                <SidebarGroupContent>
                    <SidebarMenu>
                        <SidebarMenuItem><SidebarMenuButton>Users</SidebarMenuButton></SidebarMenuItem>
                    </SidebarMenu>
                </SidebarGroupContent>
            </SidebarGroup>
        </SidebarContent>
        <SidebarFooter>…</SidebarFooter>
    </SidebarAside>
    <SidebarMain><RouterView /></SidebarMain>
</SidebarLayout>

SidebarLayout 内の Sidebar には一意の id が必要です。side、variant（sidebar|floating|inset）、collapsible（offcanvas|icon|none）、v-model:open、openOnHover、overlay、width に対応しています（input/source/sidebar/index.d.ts）。すべてのパーツの一覧はコンポーネントを参照してください。

フォームフィールド

• FloatLabel、IftaLabel（フィールド内ラベル）、または通常の Label を使用します。
• 各フィールドに fluid を指定する代わりに、全幅の入力欄にする領域を <Fluid> で囲みます。
• 任意の入力コンポーネントの invalid プロパティでエラースタイルを適用できます。検証状態は @primevue/forms（別パッケージ、https://primevue.dev/forms/）で管理します。

DataTable のパフォーマンス

dataKey を設定した場合、大規模なデータで O(1) の検索を行うには、expandedRows に行オブジェクトの配列ではなくオブジェクト（{ '1004': true }）をバインドします（公式 DataTable ドキュメント）。stateStorage と stateKey を使用すると、ユーザー設定を保持できます。

参考資料

• セットアップと設定：インストール、ライセンス、テーマプリセット、ダークモード、ロケール、スタイルなしモード、Nuxt。
• v5 の変更点と移行：置き換え先を含む非推奨化および削除の一覧。
• コンポーネントと置き換え先：複合コンポーネントのファミリー、v5 の新しいコンポーネント、サービス、ユーティリティ。