> ## Documentation Index
> Fetch the complete documentation index at: https://docs.comfy.org/llms.txt
> Use this file to discover all available pages before exploring further.

# フロントエンド拡張機能向けPrimeVue削除移行

> ComfyUIフロントエンドでPrimeVueが削除された後、$primevue、PrimeVueコンポーネント、--p-* CSS変数、PrimeVueツールチップセレクタを置き換えます。

ComfyUI フロントエンドは PrimeVue をインストールしなくなりました。ホストアプリは `app.use(PrimeVue)` を呼び出さないため、拡張機能は依存していた可能性のある3つの要素を失います:

* ホスト Vue アプリの `$primevue` グローバルプロパティ。
* PrimeVue テーマスタイルシート。これにより、拡張機能がホストアプリ内でレンダリングする PrimeVue コンポーネントはスタイルが適用されずにレンダリングされます。
* `--p-primary-color`、`--p-surface-*`、`--p-text-color`、`--p-content-background`、`--p-form-field-border-color` などのすべてのグローバル `--p-*` CSS 変数。

## PrimeVueコンポーネントをレンダリングする拡張機能

ホストアプリのPrimeVueインスタンスに依存しないでください。PrimeVueコンポーネントを独自のマークアップに置き換えるか、UI用に独自のVueアプリを作成し、そのアプリにPrimeVueとそのテーマをインストールしてください。

## `--p-*` 変数を読み取る拡張機能

これらをデザインシステムのテーマ変数に置き換えてください。テーマ変数は、アクティブなライトまたはダークテーマと、アクティブなカラーパレットに従います。

| PrimeVue 変数 | テーマ変数 |
| - | - |
| `--p-primary-color` | `--primary` |
| `--p-text-color` | `--foreground` |
| `--p-text-muted-color` | `--muted-foreground` |
| `--p-content-background` | `--background` |
| `--p-surface-*` (パネル、浮き上がった領域) | `--secondary` |
| `--p-content-border-color`, `--p-form-field-border-color` | `--border` |

## ツールチップ

グローバルな `v-tooltip` ディレクティブは削除され、ツールチップは PrimeVue の DOM をレンダリングしなくなりました:

* `.p-tooltip` と `.p-tooltip-text`
* `data-pd-tooltip` 属性
* `$_ptooltip*` 要素のプロパティ

開いているツールチップは、`data-slot="tooltip-content"` を持つ1つの要素をレンダリングし、`document.body` の末尾にポータルされるようになりました。この要素はツールチップが開いている間だけ存在します。独自の UI の表示中にツールチップを非表示にする拡張機能は、`.p-tooltip` ではなく `[data-slot="tooltip-content"]` を対象にしてください。

`--node-component-tooltip*` CSS 変数もデザインシステムのスタイルシートから削除されました。代わりにテーマ変数を使用してください: `--background`、`--foreground`、`--border`。古い名前 `--base-background`、`--base-foreground`、`--border-default` は非推奨です。詳細は[非推奨の変数名](#非推奨の変数名)を参照してください。

## 非推奨の変数名

これらのノートの以前のバージョンでは、古いデザインシステムの名前を指していました。それらはまだ有効ですが、非推奨であり、将来のリリースで削除される予定です。今すぐテーマ変数に移行してください:

| 非推奨の名前 | テーマ変数 |
| - | - |
| `--base-background` | `--background` |
| `--base-foreground` | `--foreground` |
| `--border-default` | `--border` |
| `--primary-background` | `--primary` |
| `--secondary-background` | `--secondary` |
| `--component-node-background` | `--node` |

PrimeIcons はまだ読み込まれているため、既存の `pi pi-*` アイコンクラスは引き続き機能しますが、段階的に廃止されます。新たな使用を追加しないでください。


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.