Livewire v3 wire:cloak

wire:cloak

wire:cloak は、Livewire が完全に初期化されるまで、ページ読み込み時に要素を非表示にするディレクティブです。これは、Livewire が初期化される前にページが読み込まれる際に発生する可能性のある「スタイルのないコンテンツのちらつき（flash of unstyled content）」を防ぐのに役立ちます。wire:cloak is a directive that hides elements on page load until Livewire is fully initialized. This is useful for preventing the "flash of unstyled content" that can occur when the page loads before Livewire has a chance to initialize.

基本的な使い方Basic usage

wire:cloak を使用するには、ページ読み込み時に非表示にする要素にディレクティブを追加します。To use wire:cloak, add the directive to any element you want to hide during page load:

<div wire:cloak>
    <!-- このコンテンツは、Livewire が完全にロードされるまで非表示になります -->
</div>

動的なコンテンツDynamic content

wire:cloak は、wire:show を使用して表示または非表示にする要素など、初期化されていない動的なコンテンツをユーザーに表示させたくない場合に特に役立ちます。wire:cloak is particularly useful in scenarios where you want to prevent users from seeing uninitialized dynamic content such as element shown or hidden using wire:show.

<div>
    <div wire:show="starred" wire:cloak>
        <!-- 黄色の星のアイコン... -->
    </div>

    <div wire:show="!starred" wire:cloak>
        <!-- 灰色の星のアイコン... -->
    </div>
</div>

上記の例では、wire:cloak がない場合、Livewire が初期化される前に両方のアイコンが表示されます。ただし、wire:cloak を使用すると、初期化されるまで両方の要素が非表示になります。In the above example, without wire:cloak, both icons would be shown before Livewire initializes. However, with wire:cloak, both elements will be hidden until initialization.