wire:cloak

Laravel Livewire Documentation Reference

Since Magewire is heavily inspired by Laravel Livewire, many concepts are either identical or very similar. To avoid duplicating documentation, this page only covers Magewire-specific and platform-specific details. For all general concepts and in-depth explanations, you can refer to the corresponding Laravel Livewire documentation.

Livewire Reference

wire:cloak marks content that should remain hidden until Magewire initializes, then the browser runtime removes the attribute.

<div wire:cloak>
    <?= $escaper->escapeHtml(__('Reactive account controls are ready.')) ?>
</div>

Add the hiding rule in Magewire 3.5

Magewire 3.5 removes wire:cloak, but its base CSS only defines the equivalent x-cloak rule. Add the following rule to your theme until core supplies it:

[wire\:cloak] {
    display: none !important;
}

Do not cloak essential content that must remain usable when JavaScript fails. For Alpine-owned markup, use x-cloak with the rule already supplied by Magewire's base styles.