Livewire v3 upcoming features and changes

Last Wednesday at Larcon Online, Caleb Porzio gave a talk titled “LiveWire futureView all the new features planned for Livewire v3. In this article, we’ll review those features again in case you missed the talk or wanted a second look.

All new Alpine-based cores

Entire current-carrying electrical wire The core has been rewritten. The new kernel relies more on Alpine, using Morph, History, and other plug-ins under the hood, which means Livewire has better variation, features can be built faster, and there’s less duplication between Livewire and Alpine. Also, restructuring the code base and relying on Alpine more allowed the addition of many new features.

Scripts, Styles and Alpine from Livewire are automatically injected

After the composer installs Livewire v2, you have to add files @livewireStylesAnd the @livewireScripts, and Alpine to your planning. With Livewire v3, you will just install Livewire and everything you need will be automatically injected – including Alpine!

1DOCTYPE html>

2<html lang="en">

3<head>

4 <script src="//unpkg.com/alpinejs" defer>script>

5 @livewireStyles

6 @livewireScripts

7head>

8<body>

9 ...

10body>

11html>

Reload without build step

Livewire v3 will include a hot reload with no build step. Simply save a file in your editor and instantly see these changes in your browser without breaking the state of your components!

wire:transition

The Alps have had transitions for a while, but Livewire v3 will have a wrap around it x-transition Call wire:transition. Add wire:transition to any element to show or hide with Livewire and get those really cool transitions. Where wire:transition Uses x-transition Under the hood, like all rates .opacity And the .duration It will also be supported.

Write JavaScript functions in your PHP classes

Livewire v3 will support writing JavaScript functions directly in Livewire back-end components. Add a function to your component, add a file /** @js */ Comment above the function, then return some JavaScript code using PHP’s HEREDOC syntax and call it from the front end. The JavaScript code will be executed without any requests being sent to your backend.

1

2 

3namespace AppHttpLivewire;

4 

5class Todos extends LivewireComponent

6{

7 /** @prop */

8 public $todos;

9 

10 /** @js */

11 public function clear()

12 {

13 return <<<'JS'

14 this.todo = '';

15 JS;

16 }

17}

1<div>

2 <input wire:model="todo" />

3 

4 <button wire:click="clear">Clearbutton>

5div>

/** @locked */ Properties

Livewire v3 will support locked properties – properties that cannot be updated from the front end. Add /** @locked / Comment over a property on your component, and Livewire will throw an exception if someone tries to update that property from the frontend.

1

2 

3namespace AppHttpLivewire;

4 

5class Todos extends LivewireComponent

6{

7 /** @locked */

8 public $todos = [];

9}

wire:model Delayed by default

When Livewire was first released, it was primarily intended to write components like search that needed a really “live” feel, so automatically sending updates to the server every time an input was updated made sense. Now, we are using Livewire to build all kinds of applications. As Livewire has evolved and used, we’ve realized that ‘delayed’ behavior makes more sense for 95% of models, so in v3 the ‘delayed’ functionality will be the default. This will save unnecessary requests going to your server and improve performance.

When you need a “live” function on an input, you can use wire:model.live to enable that function.

Note: This is one of the very few changes from v2 to v3.

bulk orders

In Livewire v2, if you have multiple components using wire:poll Or send and listen for events, each of these components will send separate requests to the server on each poll or event. In Livewire v3, there is smart request aggregation wire:polls, events, listeners, and method calls can all be grouped into a single request when possible, which saves more requests and improves performance.

reactive properties

When using nested components in Livewire v2, if a property is updated on the parent component, the child component’s data is not automatically kept in sync. There are manual solutions using events and listeners, but they are not perfect. In Livewire v3, when you pass a piece of data to a child component, add a file /** @reactive */ Commenting over the property in the child, then updating it in the parent component, it will be updated in the child component.

1

2 

3namespace AppHttpLivewire;

4 

5class TodosCount extends LivewireComponent

6{

7 /** @prop */

8 public $todos;

9 

10 public function render()

11 {

12 return <<<'HTML'

13 <div>

14 Todos: {{ count($todos) }}

15 div>

16 HTML;

17 }

18}

/** @modelable */ Properties

Another problem with Livewire v2 is “modeling” a property from a parent component to a child component. say you want component. It’s not easy to pass a value and then automatically update the parent any time it’s updated in the child. In Livewire v3, you can add files wire:model When using the input component, add inside the input component a /** @modelable */ Comment above the property where you store the component’s value and Livewire will handle the rest.

1

2 

3namespace AppHttpLivewire;

4 

5class Todos extends LivewireComponent

6{

7 public $todo = '';

8 

9 public $todos = [];

10 

11 public function add() ...

12 {

13 $this->todos[] = $this->todo;

14 $this->todo = '';

15 }

16 

17 public function render()

18 {

19 return <<<'HTML'

20 <div>

21 <livewire:todo-input wire:model="todo" />

22 <ul>

23 @foreach ($todo as $todos)

24 <li>{{ $todo }}li>

25 @endforeach

26 ul>

27 div>

28 HTML;

29 }

30}

1

2 

3namespace AppHttpLivewire;

4 

5class TodoInput extends LivewireComponent

6{

7 /** @modelable */

8 public $value = '';

9 

10 public function render()

11 {

12 return <<<'HTML'

13 <div>

14 <input wire:model="value">

15 div>

16 HTML;

17 }

18}

Accessing native component data and methods using $parent

In Livewire v3, there will be a new way to access the main component’s data and methods. there is new $parent The property that can be accessed to call methods on the parent.

1

2 

3namespace AppHttpLivewire;

4 

5class TodoInput extends LivewireComponent

6{

7 /** @modelable */

8 public $value = '';

9 

10 public function render()

11 {

12 return <<<'HTML'

13 <div>

14 <input

15 wire:model="value"

16 wire:keydown.enter="$parent.add()"

17 >

18 div>

19 HTML;

20 }

21}

@teleport

Livewire v3 will also include a file @teleport Blade directive that will allow you to “teleport” one part of the tags and make it another part of the DOM. This can sometimes help avoid z-index issues with media and slides.

1<div>

2 <button wire:click="showModal">Show modalbutton>

3 

4 @teleport('#footer')

5 <x-modal wire:model="showModal">

6

7 x-modal>

8 @endteleport

9div>

lazy ingredients

Livewire v3 will display “lazy” components. If you have a component that takes time to load due to some expensive query or is displayed in a segment that is not always open, you may want to wait for it to load until it is displayed on the page. In Livewire v3, just add a file lazy An attribute when a component is rendered and will not be rendered initially. When it comes to a viewport, Livewire will fire a request to render. You will also be able to add placeholder content by executing placeholder method on your component.

1<div>

2 <button wire:click="showModal">Show modalbutton>

3 

4 @teleport('#footer')

5 <x-modal wire:model="showModal">

6 <livewire:example-component lazy />

7 x-modal>

8 @endteleport

9div>

1

2 

3namespace AppHttpLivewire;

4 

5class ExampleComponent extends LivewireComponent

6{

7 public static function placeholder()

8 {

9 return <<<'HTML'

10 <x-spinner />

11 >>>

12 }

13 

14 public function render() /** [tl! collapse:7] */

15 {

16 return <<<'HTML'

17 <div>

18 Todos: {{ count($todos) }}

19 div>

20 HTML;

21 }

22}

wire:navigate

In Livewire v3, you will be able to add wire:navigate to any anchor tag, and when clicked, Livewire will fetch the page in the background, then switch the DOM very quickly giving your app a SPA-like feel. If you add .prefetch Modifier Also, Livewire will prefetch the contents of the link as soon as you move the link, making it feel faster!

1<a href="/example" wire:navigate.prefetch>Example Pagea>

@persist

Another great Blade guide that Livewire v3 will include is @persist. Use @persist in association with wire:navigate, will enable you to have parts of your apps “persistent” through page changes. A good example of this functionality is a podcast player that keeps playing as you go through the app.

1DOCTYPE html>

2<html lang="en">

3<body>

4 <x-podcast-header />

5 

6 <x-podcast-body>

7 {{ $slot }}

8 x-podcast-body>

9 

10 @persist('player')

11 <x-podcast-player />

12 @endpersist

13body>

14html>

New design for laravel-livewire.com

Last but not least, Livewire and Docs gets a fresh new design!

conclusion

We are really looking forward to all these new features in Livewire v3. If your business is Livewire based and you want to support version 3 development or you want to help support your Livewire applications, consider joining the Administrator support program.