ViteでPrimeVueをインストールする

ViteプロジェクトでのPrimeVueのセットアップ。

ダウンロード #

PrimeVueは、npm Registryでダウンロードできます。


# Using npm
npm install primevue

# Using yarn
yarn add primevue

# Using pnpm
pnpm add primevue

プラグイン #

デフォルト設定を行うには、PrimeVueプラグインをアプリケーションプラグインとしてインストールする必要があります。このプラグインは軽量で、アプリケーションに影響を与えることなく設定オブジェクトのみをセットアップします。PrimeVueには、スタイル付きモードとスタイルなしモードの2つのスタイリングモードがあります。始めたばかりの場合は、スタイル付きモードから開始してください。

スタイル付きモード #

スタイル付きモードでは、プリスキンされたコンポーネントが提供され、デフォルトテーマはオーラで、プライマリカラーはエメラルドです。詳細については、スタイル付きモードのドキュメントを参照してください。

テーマはデフォルトではPrimeVueに含まれていないため、@primevue/themesアドオンパッケージをインストールしてください。


# Using npm
npm install @primevue/themes

# Using yarn
yarn add @primevue/themes

# Using pnpm
pnpm add @primevue/themes

オーラのようなテーマを使用するようにPrimeVueを設定します。


import { createApp } from 'vue';
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);
app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

スタイルなしモード #

スタイルなしモードでは、コンポーネントにはCSSが含まれていないため、コンポーネントを自分でスタイル設定する必要があります。これは、PrimeVueの上に独自のUIライブラリを構築する場合に特に役立ちます。詳細と例については、スタイルなしモードのドキュメントを参照してください。


import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, {
    unstyled: true
});

使い方 #

各コンポーネントは個別にインポートおよび登録できるため、使用するものだけをバンドルできます。インポートパスは、対応するコンポーネントのドキュメントにあります。ツリーシェイキングサポートでコンポーネントを自動的にインポートする場合は、自動インポートガイドを参照してください。


import Button from "primevue/button"

const app = createApp(App);
app.component('Button', Button);

例 #

Vueエコシステムで一般的なオプションのさまざまなサンプルを作成しました。primevue-examplesリポジトリで、vite-quickstartやvite-ts-quickstartを含むその他のサンプルを参照してください。

動画 #

Çağatay ÇiviciによるCreate-Vueを使用したスタイル付きモードでPrimeVueをセットアップするための短いビデオチュートリアルをご覧ください。