How to binding x-cloak

[ghabriel25]

Alpine.js version

v3.15.12

Browser and operating system

Chrome on Windows

What do you need help with?

Based on the documentation, I can bind Alpine directives directly, however I can't find a way to bind x-cloak directive. Maybe because its being queued in micro task. I just want to bundle the directives x-show and x-cloak into one that I dont have to write it again and again.

// Not working example
<span x-data="withCounter('{{ $count }}', '{{ $eventName }}')" x-bind="counter"></span>

// Working example
<span x-data="withCounter('{{ $count }}', '{{ $eventName }}')" x-cloak x-bind="counter"></span>

Alpine.data('withCounter', (value, eventName) => ({
    count: value,
    get show() {
        return Boolean(this.count && this.count !== '0')
    },
    counter: {
        // This doesnt work
        ['x-cloak']() {
            return true
        },
        ['x-on:' + eventName + '.window'](e) {
            this.count = e.detail.count
        },
        ['x-show']() {
            return this.show
        },
        ['x-text']() {
            return this.count
        },
    },
}))

How do you expect it to work?

I hope there is a documentation about it. All I can find was directives with a value

Please confirm

• I have searched existing discussions to check this hasn't already been answered.
• I have provided code samples as text and NOT images.

[browner12]

x-cloak cannot be "bound". It needs to exist on the HTML before AlpineJS is initialized. All Alpine does is remove the attribute after it has initialized.

[ghabriel25]

@browner12 I see, thanks for the information. Maybe it can be documented as reference which directive cannot be "bound" or is it just x-cloak that cannot be bound?

[ekwoka]

I believe it can be bound, it just don't do anything. Since logically it exists to hide the thing until Alpine runs. And if the binding runs, then...cloaking doesn't matter, since the x-show would already be hiding the thing

[ekwoka]

It wouldn't make sense to bind x-cloak since the whole idea is it needs to be there before Alpine sees it, and binding would see it and immediately remove it if it was in a binding.

[ghabriel25]

Thanks! Now I understand how x-cloak works.