Level 80
@newbie360 Livewire 3 has literally just been released. Give things a chance to catch up and update.
1 like
Jul 22, 2023
6
Level 24
When Jetstream update to use Livewire v3 ?
i tired Inertia + Vue 4 weeks, but i find out the main problem is we need to write too much of code,
so i go back to Livewire, now Livewire v3 has https://livewire.laravel.com/docs/navigate , this totally changed the dev flow, it means we can only use full-page-component in the route like SPA without page refresh
Route::get('/', Dashboard::class);
Route::get('/posts', ShowPosts::class);
Route::get('/users', ShowUsers::class);
<nav>
<a href="/" wire:navigate>Dashboard</a>
<a href="/posts" wire:navigate>Posts</a>
<a href="/users" wire:navigate>Users</a>
</nav>
holy s... , can't wait for Jetstream update to use Livewire v3
Level 11
@newbie360 Livewire is in BETA version.
Would you REALLY want to, for example, get a medical treatment with a drug that is still in testing, just because it looks like a new hot thing? :)
3 likes
Level 1
This is a workaround to make jetstream work with livewire v3, until there is an official upgrade.
First, since livewire replaced emit and dispatchBrowserEvent methods with $dispatch, and jetstream uses those extensively we will add them back as macros
Add this in boot method of /app/Providers/AppServiceProvider
\Livewire\Component::macro('emit', function ($event) {
$this->dispatch($event);
});
\Livewire\Component::macro('dispatchBrowserEvent', function ($event) {
$this->dispatch($event);
});
Then you will need to edit the /resources/views/components/action-message to be like this
@props(['on'])
<div x-data="{ shown: false, timeout: null }"
x-on:{{ $on }}.window="clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000);"
x-show.transition.out.opacity.duration.1500ms="shown"
x-transition:leave.opacity.duration.1500ms
style="display: none;"
{{ $attributes->merge(['class' => 'text-sm text-gray-600 dark:text-gray-400']) }}>
{{ $slot->isEmpty() ? 'Saved.' : $slot }}
</div>
Then run the php artisan livewire:upgrade command and accept all the changes and it will take care of updating jetstream views since they are already in the /resources/views folder.
** Edit: You will also need to replace $attributes->wire('model') in /resources/views/components/jet-modal with $attributes->get('wire:model.live')
Now jetstream pages should work with you, without any problems :)
NOTE: I didn't test all jetstream features, but all of what i tested is working as expected.
1 like
Level 1
@m7moudabdel7mid Thanks for this!
I noticed that the 2FA of Jetstream's profile page wasn't work and found that it depended on browser events and parameters weren't getting passed. so I added a little bit extra to the AppServiceProvider modfication
\Livewire\Component::macro('emit', function ($event, $params = null) {
if (is_array($params)) {
$this->dispatch($event, ...$params);
} else {
$this->dispatch($event, $params);
}
});
\Livewire\Component::macro('dispatchBrowserEvent', function ($event, $params = null) {
if (is_array($params)) {
$this->dispatch($event, ...$params);
} else {
$this->dispatch($event, $params);
}
});
Level 11
@m7moudabdel7mid Thanks for this!
One thing I noticed when click on save, all other action messages will display as well. I'm not sure how can fix that.
1 like
Level 2
@nasrulhazim I experienced a similar problem. I tested the profile settings page, by updating my account password. Choosing "Save" on the Update Password form resulted in "saved" being displayed on both this form and the Profile Information form, where the action-message component is used.
My guess would be that there is a problem with how the dispatched event is handled, because @this.on('event-name', callbackFn) was deprecated in Livewire v3. Is it possible that there are additional parameters to restrict the scope of the event emitted to only the component where it originated?
Please or to participate in this conversation.