Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

motinska94's avatar

Is it possible to remove AlpineJs from Livewire?

I'm having a very strange issue.. In my website, I have a dropdown menu on my navbar (which is inside my app layout, so it is included on every single page) that uses Alpine

On the home page for example, this dropdown works perfectly. But in some pages, specifically the ones that have a livewire component inside them, it doesn't work at all. I can see the dropdown visibility toggle animation being started for about 1/100th of a second but it disappears back instantly.

I'm also getting this error in the console when I try to toggle the dropdown on those pages:

Uncaught (in promise)
Object { isFromCancelledTransition: true }

I did some research and learnt that this error occurs when you try to initialize AlpineJs more than once. And my theory is; since these pages with livewire components are already utilizing Alpine, that causes Alpine to re-initialize. And I think I'm getting this error because I added the following lines to my app.js file to be able to use the dropdown from pages that don't have livewire components in them.

import Alpine from "alpinejs";
window.Alpine = Alpine;
Alpine.start();

Now I can either remove these lines from the app.js file and have the dropdown only work on pages with livewire components, or I can keep it and have it only work on pages without livewire components.

So, is there a way to stop livewire from bringing its own AlpineJs and have it use the one that is included from app.js file instead?

Or should I go crazy and include a livewire component on all my pages?

0 likes
3 replies
webrobert's avatar

my guess is this is DOM issue. tag is missing somewhere.

Please or to participate in this conversation.