primevue

PrimeVue のセットアップと使用方法

Vue 3 および Vite プロジェクトで PrimeVue を設定する方法を、オートインポートのセットアップやテーマ設定も含めて説明します。

概要

PrimeVue は、豊富なコンポーネント、アイコン、テンプレートを備えた Vue.js 用の総合 UI スイートです。スタイル付きモード（Aura、Lara、Nora など、あらかじめスタイルが適用されたテーマ）と、スタイルなしモード（Tailwind、Bootstrap などを使ってスタイルを完全に制御するモード）の両方に対応しています。

ドキュメント

LLM 向けに最適化された公式ドキュメント：https://primevue.org/llms/pages/introduction.md

インストール

PrimeVue とテーマをインストールします。

npm install primevue @primeuix/themes

プラグインの設定

main.ts でテーマを指定して PrimeVue プラグインを設定します。

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import Aura from '@primeuix/themes/aura'
import App from './App.vue'

const app = createApp(App)
app.use(PrimeVue, {
  theme: {
    preset: Aura  // Available: Aura, Lara, Nora, etc.
  }
})
app.mount('#app')

オートインポートのセットアップ

オートインポートの依存関係をインストールします。

npm install -D unplugin-vue-components @primevue/auto-import-resolver

vite.config.ts で設定します。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { PrimeVueResolver } from '@primevue/auto-import-resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        PrimeVueResolver()
      ]
    })
  ],
})

コンポーネントの使用方法

オートインポートを設定すると、手動でインポートせずにコンポーネントを直接使用できます。

<template>
  <Button label="Click Me" />
  <InputText v-model="value" placeholder="Enter text" />
  <DataTable :value="items" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
// No PrimeVue component imports needed - handled by auto-import

const value = ref('')
const items = ref([])
</script>

よく使うコンポーネント

• Button：<Button label="Text" />
• InputText：<InputText v-model="value" />
• Dropdown：<Dropdown v-model="selected" :options="items" />
• DataTable：<DataTable :value="data" />
• Dialog：<Dialog v-model:visible="show" />
• Card：<Card><template #title>Title</template></Card>

テーマ

利用可能なプリセットテーマ：

• Aura - モダンで洗練されたデザイン（推奨）
• Lara - Material に着想を得たデザイン
• Nora - ミニマルなデザイン

上記のとおり、プラグイン設定でインポートして適用します。

参考資料

• 公式ドキュメント：https://primevue.org
• Vite のセットアップ：https://primevue.org/llms/pages/vite.md
• オートインポート：https://primevue.org/llms/pages/autoimport.md