設定

設定は、`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`は、定義されたプロパティを上書きするかマージするかどうかを制御します。`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`を適用すると、filledスタイルが有効になります。アプリケーション全体でfilled入力を優先する場合は、ドキュメントボディやアプリケーション要素などのグローバルコンテナにスタイルクラスを適用します。アプリケーション要素に追加した場合、Dialogなど、ドキュメントボディにテレポーテーションされるコンポーネントは、DOMツリーのアプリケーションルート要素の子孫ではないためfilled入力を表示できません。この問題を解決するには、PrimeVueの設定でも`inputVariant`を`filled`に設定します。

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

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

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

use関数の第二引数を使用して、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`からインポートされたロケールAPIによって管理されます。

ロケールオプション