Level 4
I think it should be (https://laravel-livewire.com/docs/2.x/events#from-js)
<script>
Livewire.on('createdLink', () => {
alert(1);
});
</script>
Jan 27, 2021
9
Level 15
Livewire and Alpine JS - $wire is not defined
Hi everyone,
I'm using the TALL stack to create a website.
I have this code in my Livewire component:
<script>
$wire.on('createdLink', () => {
alert(1);
});
</script>
And this is my PHP code:
$this->emit('createdLink');
Here I'm loading in the scripts (in the head section):
<livewire:scripts />
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js"></script>
<script src="https://cdn.jsdelivr.net/gh/livewire/[email protected]/dist/livewire-turbolinks.js" data-turbolinks-eval="false"></script>
But when I load the page I get this error in my console:
Uncaught ReferenceError: $wire is not defined
Does anyone know what's happening here? I searched about it but couldn't find anything useful.
Thank you! Jeroen
Level 15
@lirux That does work but I want to set an Alpine JS property. So in that case it does not work.
I foudn this in the docs (https://laravel-livewire.com/docs/2.x/alpine-js):
// Listening for a Livewire event emitted called "some-event"
$wire.on('some-event', (foo, bar) => {})
Level 15
$wire is available inside of an AlpineJS component, Livewire is available globally.
Alpine Component
<div x-data>
<h1 x-text="$wire.count"></h1>
<button x-on:click="$wire.increment()">Increment</button>
</div>
Livewire Component
<script>
Livewire.on('createdLink', () => {
alert('Link created.');
})
</script>
Sources:
Level 15
@thinkverse I placed my script tag inside my alpine js component. That should work, right?
Level 15
Why? Don't think that'll work. Alpine has an x-init attribute for setting things up, that's were the $wire.on should be I'm thinking.
<div
x-data=""
x-init="
$wire.on('createdLink', () => {
alert('Link created');
})
"
>
{{-- Rest of your alpine component. --}}
</div>
Level 15
Laravel uses a similar setup for their action messages in Jetstream, <x-jet-action-message on="saved">
That is triggered when a Livewire has that component and emits that event, $this->emit('saved');
You can see an implementation of that in the UpdateTeamNameForm component.
Component Class: https://github.com/laravel/jetstream/blob/2.x/src/Http/Livewire/UpdateTeamNameForm.php#L50
Component View: https://github.com/laravel/jetstream/blob/2.x/stubs/livewire/resources/views/teams/update-team-name-form.blade.php#L41
Blade/Alpine: https://github.com/laravel/jetstream/blob/master/resources/views/components/action-message.blade.php
Level 1
@thinkverse For some reason, in update-profile-information-form.blade.php, the action message for saved is triggering an error $wire not defined, i don't know what i did wrong for it to fail, i just added more fields to the form and extended the component.
Only clue i can find is that x-init is generating with an empty ID, so it breaks when trying to access the parent component
Level 26
If it helps anyone, I had the issue with it not firing and discovered I need to add the x-data added to the container still.
<div x-data>....
<div @click.away="Livewire.emit('functionCall')"....
2 likes
Level 5
I know this is an old topic but for anyone who stumbles on this.
Try calling window.Livewire.start() before Alpine.start()
Like so:
if (window.Livewire) {
window.Livewire.start();
}
Alpine.start();
Please or to participate in this conversation.