設定

設定は、primevue/configからインポートされたPrimeVueインスタンスによって管理されます。

スタイルモードは、デザイントークンベースのアーキテクチャに基づいてテーマを提供します。独自のテーマの構築など、詳細についてはスタイル付きモードのドキュメントを参照してください。

import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);

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

スタイルなしモードでは、コンポーネントが組み込みのスタイルクラスを追加せず、カスタムCSSやTailwind、Bootstrap、PrimeFlexなどのライブラリを使用してスタイルを設定できるように指示します。詳細については、スタイルなしモードのドキュメントを参照してください。

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

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

コンポーネントタイプごとに共有パススループロパティを定義します。詳細については、パススループロップのドキュメントを参照してください。

コンポーネントのptOptionsプロパティとusePassThroughメソッドを設定するために使用されます。mergeSectionsは、メイン構成からのセクションを追加するかどうかを定義し、mergePropsは、定義されたpropsをオーバーライドするか、マージするかを制御します。デフォルトでは、mergeSectionsはtrue、mergePropsはfalseです。

リップルは、ボタンなどのサポートされているコンポーネントのオプションのアニメーションです。デフォルトでは無効になっており、PrimeVueのセットアップ中にアプリのエントリファイル（例：main.js）で有効にする必要があります。

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

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

入力フィールドには2つのスタイルがあります。デフォルトはフィールドの周りに境界線があるoutlinedで、filledの代替はフィールドに背景色を追加します。入力の祖先にp-variant-filledを適用すると、塗りつぶしスタイルが有効になります。アプリケーション全体で塗りつぶし入力を使用する場合は、ドキュメントの本文やアプリケーション要素などのグローバルコンテナを使用してスタイルクラスを適用します。アプリケーション要素に追加した場合、ダイアログなどのドキュメント本文にテレポートされるコンポーネントは、DOMツリー内のアプリケーションルート要素の子孫ではないため、塗りつぶし入力を表示できないことに注意してください。この場合を解決するには、PrimeVue構成でinputVariantをfilledに設定します。

ZIndexは、複数のコンポーネントを組み合わせたときにオーバーレイコンポーネントのレイヤリングがシームレスに機能するように自動的に管理されます。それでも、ヘッダーセクションが固定されているカスタムレイアウトなど、デフォルト値を設定したい場合があるかもしれません。このような場合、ドロップダウンはアプリケーションヘッダーの下に表示する必要があり、モーダルダイアログは上に表示する必要があります。PrimeVue構成は、コンポーネントカテゴリのデフォルト値をカスタマイズするためのzIndexプロパティを提供します。デフォルト値は以下に説明されており、PrimeVueのセットアップ時にカスタマイズできます。

コアで動的に生成されたスタイル要素で使用するノンス値。

app.use(PrimeVue, {
    csp: {
        nonce: '...'
    }
});

use関数の2番目のパラメーターを使用して、PrimeVueのインストール中にロケールを開始できます。

app.use(PrimeVue, {
    locale: {
        accept: 'Aceptar',
        reject: 'Rechazar',
        //...
    }
});

ロケール構成はリアクティブであるため、変更はUIに即座に反映されます。多言語アプリケーションを作成していて、言語を動的に変更する必要があるとします。

import { defineComponent, onMounted } from "vue";
import { usePrimeVue } from "primevue/config";

export default defineComponent({
    setup() {
        const changeToSpanish = () => {
            const primevue = usePrimeVue();
            primevue.config.locale.accept = "Aceptar";
            primevue.config.locale.reject = "Rechazar";
        }

        onMounted(() => {
            changeToSpanish();
        })
    }
});

ロケールのすぐに使用できる設定は、コミュニティサポートのPrimeLocaleリポジトリで入手できます。プルリクエストでこのリポジトリに貢献し、コミュニティの他のメンバーと共有していただければ幸いです。

設定は、primevue/configからインポートされたLocale APIによって管理されます。

ロケールオプション