primevue-aura

PrimeVue Aura

PrimeVue の Aura プリセットでスタイリングされた、高密度のデータ表示、高度なフィルタリング、複雑なフォームコントロール、コンテキストメニューです。Tailwind は使用しません。

アプリケーションのフレーム、ドロワー、ネイティブシェルは @quasar-foundation に属します。トークン名は @aura-design-tokens に属します。モーションは @motion-physics に属します。

エージェントがこのスキルを有効にする状況

• データグリッド、並べ替え、行の展開、仮想スクロール、列フィルターを構築するとき。
• 多階層メニュー、ツリー選択ドロップダウン、カスケード選択、日付または時刻の範囲ピッカーを構築するとき。
• 洗練されたスタイリングが必要な、アプリ内モーダル、フローティングツールチップ、ポップオーバーを構築するとき。
• Quasar と PrimeVue を使ったアプリの vite.config.js と src/main.js をスキャフォールディングするとき。

インストール

npm install primevue @primevue/themes primeicons

ハイブリッド調和のセットアップ

Quasar の CSS リセットが最初に読み込まれます。次に PrimeVue Aura を読み込むことで、コンポーネントのスタイルを維持します。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { quasar, transformAssetUrls } from '@quasar/vite-plugin';

export default defineConfig({
  plugins: [
    vue({ template: { transformAssetUrls } }),
    quasar({ sassVariables: 'src/quasar-variables.sass' })
  ]
});

// src/main.js
import { createApp } from 'vue';
import App from "@/App.vue";

// 1. Quasar core base & icon assets (Loads FIRST to apply foundational resets)
import { Quasar, Dialog, Notify, Morph } from 'quasar';
import '@quasar/extras/material-icons/material-icons.css';
import 'quasar/src/css/index.sass';

// 2. PrimeVue & Aura Preset (Loads SECOND to take precedence on components)
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
import 'primeicons/primeicons.css';

// 3. Motion Engine
import { MotionPlugin } from '@vueuse/motion';

const app = createApp(App);

app.use(Quasar, { plugins: { Dialog, Notify, Morph } });

app.use(PrimeVue, {
  theme: {
    preset: Aura,
    options: {
      prefix: 'p',
      darkModeSelector: '.dark-mode',
      cssLayer: false
    }
  }
});

app.use(MotionPlugin);
app.mount('#app');

PrimeVue コンポーネントで Aura のスタイルを Quasar のリセットより優先させるには、cssLayer: false が必要です。ダークモードでは、@aura-design-tokens の .dark-mode クラスを使用します。

コンポーネントの役割

次のプリミティブには PrimeVue を使用します。

コンポーネントカテゴリ	PrimeVue プリミティブ	理由
データ表示	<DataTable>、<Column>、<TreeTable>	高密度レイアウト、仮想スクロール、複数列の並べ替え、Excel のようなフィルタリングに対応します。
複雑なピッカー	<MultiSelect>、<TreeSelect>、<CascadeSelect>	チップバッジ、グループ化された階層、インライン検索フィルタリングに対応します。
コンテキストコントロール	<TieredMenu>、<ContextMenu>、<Breadcrumb>	サブメニューをフライアウト表示する、精密なデスクトップメニューです。
ステータスとメトリックのバッジ	<Tag>、<Badge>、<ProgressBar>	一貫したタイポグラフィと、意味に応じたトーン表示を提供します。

データ密度の高い画面のフォームフィールド（InputText、Select、DatePicker、Password）も、そのコントロールが Quasar のシェルプリミティブではない場合は PrimeVue を使用します。Tailwind でスタイルを変更しないでください。PrimeVue がすでにフィールドを所有している場合は、Quasar の q-input でラップしないでください。

カードの本文コンテンツは <template #content> に配置します。

手順

1. 対象がデータ、複雑なコントロール、またはオーバーレイであることを確認します。シェルのクロームは Quasar のままにします。
2. primevue/<name>（PascalCase のパス）からコンポーネントをインポートします。unstyled エントリーは使用しません。プリセットは Aura です。
3. PrimeVue MCP サーバーが接続されている場合、プロパティを独自に決める前に、そこで確認します。
4. ビューの作成後、行とダイアログの表示時の動きに @motion-physics を読み込みます。空間的な動きには、PrimeVue のデフォルト CSS トランジションを追加しないでください。
5. サーフェスとテキストには @aura-design-tokens の var(--app-*) を使用します。これらは --p-* を読み取ります。

タスク完了時：次のスキルを提案する

このスキルに関するユーザーの依頼を完了したら、次に実行する内容を提案します。

1. 次を実行します。

   python .agents/skills/heyeddi/scripts/suggest_next_skill.py --current-skill primevue-aura --project-root .
   

2. スクリプトの ### Next step ブロックを、最終回答に含めます。