Initialising Alpine components when using Livewire navigate

[jacksleight]

I have a component that uses a component object defined with Alpine.data().

If I initialise that object inside an alpine:init event listener (as per https://alpinejs.dev/globals/alpine-data) and load the page directly everything works great.

However, if I navigate to the page using Livewire's navigate feature it is not initialised, as alpine:init doesn't fire after the first load. The Livewire docs have a section about not using DOMContentLoaded (https://livewire.laravel.com/docs/navigate#dont-rely-on-domcontentloaded), and I guess the same applies here.

So I thought the solution would be to listen to the livewire:navigated event instead, and that does make it work when I Livewire navigate to the page.

However, while livewire:navigated does fire when a page is loaded directly, it's fired after Alpine is started, which means the components try to initialise before Alpine.data() is called and I get "[component] not defined" errors.

Is there another way to do this that works on both direct page loads and Livewire navigate loads?

I would use Livewire's new @script directive, but it only works inside Livewire components and I'm trying to do this on regular pages.

[ekwoka]

Just put it in both.

Make one function that does it, and put it in both listeners.

[TonyHuzz]

@jacksleight Hi, but if u doing like this

$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);

will it be working too ?
my situation is that when I login to the page that has the component using above sentence, it will fail to init
I guess is because of this Livewire redirect
but if I change to this

$this->redirectIntended(default: route('dashboard', absolute: false), navigate: false);

It will init properly...

[jacksleight]

Yep, when I redirect as per your example the livewire:navigated event is fired.

[TonyHuzz]

Okay.. that's weird. cuz thougth my livewire:navigated event fired too, but I still getting "[component] not defined" errors.
I'm going to have a look again. Appreciate ur answer sir, thanks a lot.

[mauritskorse]

@TonyHuzz: have you found a solution?
Ik keep having this issue as well after a fresh page load on another page, then navigating (using wire:navigate) to the page for the first time, the alpine component doesn't load. After visting the page for a second time without a page refresh the component works.

With the solution @jacksleight suggested I still keep getting this error, even though the eventlistener was called right before the error occurs:

> 'livewire:navigated'
> livewire.js?id=38dc8241:1120 Alpine Expression Error: test is not defined

This is my blade component:

<div  x-data="test"></div>
@push('scripts')
<script>
document.addEventListener(typeof Alpine === 'undefined' ? 'alpine:init' : 'livewire:navigated', function() {
    console.log(typeof Alpine === 'undefined'? 'alpine init ' : 'livewire:navigated');
    Alpine.data('test', () => ({
        init() {
            console.log('initiating test');
        },
    }))
}, { once: true });
</script>
@endPush

I have tried with and without the push to the scripts stack and moving the scripts stack all the way to the tags and towards the tag. But nothing seems to change.

[TonyHuzz]

@mauritskorse Sry, I haven't found a properly solution. Maybe @jacksleight's solution is worked but my construct is wrong so not working for me.
My workaround is to avoid using wire:navigate for now, since it's not necessary.