x-cloak

Sometimes, when you're using AlpineJS for a part of your template, there is a "blip" where you might see your uninitialized template after the page loads, but before Alpine loads.

x-cloak addresses this scenario by hiding the element it's attached to until Alpine is fully loaded on the page.

For x-cloak to work however, you must add the following CSS to the page:

css

[x-cloak] { display: none !important; }

We can now apply this on the component from x-show, to avoid page flicker.

html

<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Toggle Dropdown</button>
 
    <div x-show="open" x-cloak>
        Dropdown Contents...
    </div>
</div>

x-cloak doesn't just hide the elements, it also ensures that elements are hidden until the data is correctly set. The following example will hide the <span> tag until Alpine has set its text content to the message property:

html

<span x-cloak x-text="message"></span>

NOTE

When Alpine loads on the page, it removes x-cloak property from all the elements, which in-turn removes the display: none; applied by CSS, therefore showing the element.

x-cloak ​

x-cloak