Double Initialization of Alpine Components

[SG-fabian]

Hi!

I have various Alpine components on my page, for example "ModalTabs". In my application I added a setup function for everything:

setupAlpine() {
    Alpine.plugin(morph);
    Alpine.plugin(collapse);
    Alpine.plugin(persist);
    Alpine.plugin(focus);
    Alpine.data('ModalTabs', ModalTabs);
    Alpine.start();
}

This works fine without Livewire. But for some reason the Livewire-Plugin tries to reinitialize all my other Alpine bindings but its Alpine instance does not include my custom Addons. This results in double bindings and various errors. For example in the console with livewire.js: "Alpine Expression Error: ModalTabs is not defined".

This is the component I added: {{ livewire:show-entries collection="news" limit="{{ items_per_page or 6 }}" }}

Is it possible to stop alpine it from initializing twice or can you stop Alpine from affecting the whole page?

[robdekort]

This is not an issue with this addon. Please refer to the Livewire docs. They explain how you can set up your own Alpine plugins together with the ones Livewire ships with.

[SG-fabian]

Thanks, that helped :). Here's my solution:

document.addEventListener('alpine:init', () => {
    Alpine.plugin(morph);
    Alpine.plugin(collapse);
    Alpine.plugin(focus);
    Alpine.data('ModalTabs', ModalTabs);
});

[marcorieser]

Thanks, that helped :). Here's my solution:

document.addEventListener('alpine:init', () => {
    Alpine.plugin(morph);
    Alpine.plugin(collapse);
    Alpine.plugin(focus);
    Alpine.data('ModalTabs', ModalTabs);
});

An alternative approach can be found here: https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine

[robdekort]

An alternative approach can be found here: https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine

Yep, I'd take this route.