Upgrade Guide
Convert initial component parameters to key->value array
Before
@livewire('show-user', $user, now())
After
@livewire('show-user', ['user' => $user, 'currentTime' => now()])
Note: For nested components in a loop, the
key()parameter will NOT be a part of this key->value array. It will be added as a third parameter:
@livewire('show-user', ['user' => $user, 'currentTime' => now()], key($user->id))
Convert @livewireAssets to @livewireStyles and @livewireScripts
Before
...
@livewireAssets
</head>
<body>
...
</body>
</html>After
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>Remove Vue components from Livewire (or add a plugin for support)
Livewire is removing support for Vue components from the core in favor of using AlpineJS with it.
If you wish to continue using Vue with Livewire, there is now a separate plugin available you can find here:
https://github.com/livewire/vue.
Remove all instances of wire:transition
Livewire's transition API has been completely removed. Most instances where this was necessary can be resolved now using AlpineJS for such behavior (Alpine has its own, much better, transition API).
If there are instances you can't use Alpine for this behavior and you were relying on it, let me know in the GitHub issues and we can talk about adding it back in, but this time, matching AlpineJS's implementation and API.
Before
@if ($showModal)
<div wire:transition.fade>...</div>
@endif
After
@if ($showModal)
<div>...</div>
@endif
Move published default stubs to /stubs directory
(This change only applies if you used the artisan livewire:stub command to customize the stub used during artisan make:livewire)
Before
app/Livewire/Http/Stubs/Default.stubresources/views/livewire/stubs/default.stub
After
stubs/livewire.stubstubs/livewire.view.stub
Remove custom, named stubs
Livewire no longer supports custom, named stubs (like you might have created using artisan livewire:stub some-custom-name)
Changelog
Added
- Turbolinks integration
- AlpineJS integration
- Support for
wire:modellistening for "input" events dispatched by AlpineJS:$dispatch('input', 'foo') - Support for
wire:custom-event="foo"receiving params from an AlpineJS dispatch:$dispatch('custom-event', 'bar'). (Inpublic function foo($param),$paramwill be'bar') - Livewire custom-tag syntax (similar to Laravel 7 Blade component tag syntax) (only available in Laravel 7):
// Standard Syntax
@livewire('show-contact', ['contact' => $user])
// New Tag Syntax
<livewire:show-contact :contact="$user"/>- Livewire styles and assets custom tag syntax:
// Standard Syntax
@livewireStyles
@livewireScripts
// New Tag Syntax
<livewire:styles>
<livewire:scripts>Changed
- Changed Livewire
mount()param passing from just values, to key=>values. This matches Laravel's Blade components.
// Before
@livewire('show-contact', $user)
// After
@livewire('show-contact', ['contact' => $user])
artisan livewire:stubis now:artisan livewire:stubsartisan livewire:stubswill now publish the component stubs to the projects/stubsfolder (or create it if it doesn't already exist). This is because the new Laravelartisan stub:publishcommand uses this convention. Also, the new filenames arelivewire.stubandlivewire.view.stub.
Fixed
- If using the "date" property caster (
protected $casts = ['foo' => 'date'];), a null value won't throw an error, it will be kept null (rather than Livewire trying to castnullto a date).
Removed
- The entire transition API (
wire:transition) - The
--stuboption when making a component withartisan make:livewire --stub=foo. You can no longer create components from custom stubs. (You can still publish the default stub and modify that to affect component creation.) @livewireAssetsin favor of@livewireStylesand@livewireScripts- Support for Vue component integration (moved to separate repo: https://github.com/livewire/vue)