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

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

ダウンロード #

PrimeVueは、npmレジストリでダウンロードできます。


# 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を含むその他のサンプルを参照してください。

ビデオ #

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