Alpine: x-if not work with Laravel + Vue

[haipham]

Hello,

x-if not work with Laravel + Vue, but when remove all content resources/js/app.js, it works. Please help me resolve this issue.

[HugoDF]

Do you have the relevant HTML code snippet?

x-if should be used on a <template> tag, not other elements.

[haipham]

Do you have the relevant HTML code snippet?

x-if should be used on a <template> tag, not other elements.

Yes.

// resources/views/home.blade.php

<div x-data="{ alertShow: true }">
    <button x-on:click="alertShow = false">
        <svg viewBox="0 0 20 20" fill="currentColor" class="w-6 h-6 text-red-500"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
    </button>
    <template x-if="alertShow">
            <div class="flex items-center justify-between bg-red-100 border-l-4 border-red-500 text-red-700 p-3 mb-8" role="alert">
                Something not ideal might be happening.
            </div>
    </template>
</div>

[SimoTod]

If your Alpine component is inside a Vue application, it won't work.
When the DOM is ready, Vue takes control of the DOM, detaching nodes and replacing it, removing other JS listeners, etc.
See https://github.com/alpinejs/alpine/issues/107#issuecomment-575812643

[haipham]

@SimoTod Thank you for the information.