v1.0.0
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.stub
resources/views/livewire/stubs/default.stub
After
stubs/livewire.stub
stubs/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:model
listening 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)
,$param
will 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:stub
is now:artisan livewire:stubs
artisan livewire:stubs
will now publish the component stubs to the projects/stubs
folder (or create it if it doesn't already exist). This is because the new Laravelartisan stub:publish
command uses this convention. Also, the new filenames arelivewire.stub
andlivewire.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 castnull
to a date).
Removed
- The entire transition API (
wire:transition
) - The
--stub
option 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.) @livewireAssets
in favor of@livewireStyles
and@livewireScripts
- Support for Vue component integration (moved to separate repo: https://github.com/livewire/vue)