CoderFunda
  • Home
  • About us
    • Contact Us
    • Disclaimer
    • Privacy Policy
    • About us
  • Home
  • Php
  • HTML
  • CSS
  • JavaScript
    • JavaScript
    • Jquery
    • JqueryUI
    • Stock
  • SQL
  • Vue.Js
  • Python
  • Wordpress
  • C++
    • C++
    • C
  • Laravel
    • Laravel
      • Overview
      • Namespaces
      • Middleware
      • Routing
      • Configuration
      • Application Structure
      • Installation
    • Overview
  • DBMS
    • DBMS
      • PL/SQL
      • SQLite
      • MongoDB
      • Cassandra
      • MySQL
      • Oracle
      • CouchDB
      • Neo4j
      • DB2
      • Quiz
    • Overview
  • Entertainment
    • TV Series Update
    • Movie Review
    • Movie Review
  • More
    • Vue. Js
    • Php Question
    • Php Interview Question
    • Laravel Interview Question
    • SQL Interview Question
    • IAS Interview Question
    • PCS Interview Question
    • Technology
    • Other

17 October, 2022

Upcoming Livewire v3 Features and Changes

 Programing Coderfunda     October 17, 2022     Laravel, php     No comments   

 Last Wednesday at Laracon Online, Caleb Porzio gave a talk called "The Future of Livewire" demoing all the new features planned for Livewire v3. In this article, we'll go over those features again in case you missed the talk or want a second look.

All new Alpine-based core

The entire Livewire core has been rewritten. The new core relies on Alpine more, using its Morph, History, and other plugins under the hood, which means Livewire has better diffing, features can be built faster, and there's less duplication between Livewire and Alpine. Restructuring the codebase and relying on Alpine more also enabled several of the new features to be added.

Livewire scripts, styles, and Alpine are injected automatically

After composer installing Livewire v2, you have to manually add @livewireStyles, @livewireScripts, and Alpine to your layout. With Livewire v3, you'll just install Livewire and everything you need is automatically injected - including Alpine!

1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <script src="//unpkg.com/alpinejs" defer></script>
5 @livewireStyles
6 @livewireScripts
7</head>
8<body>
9 ...
10</body>
11</html>

Hot reloading without a build step

Livewire v3 will include hot reloading without a build step. Just save a file in your editor and instantly see those changes in your browser without breaking your components' state!

wire:transition

Alpine has had transitions for a while, but Livewire v3 will have a wrapper around x-transition called wire:transition. Add wire:transition to any element that will be shown or hidden using Livewire and get those really nice transitions. Since wire:transition utilizes x-transition under the hood, all the modifiers like .opacity and .duration will be supported as well.

Write JavaScript functions in your PHP classes

Livewire v3 will support writing JavaScript functions directly in your backend Livewire components. Add a function to your component, add a /** @js */ comment above the function, then return some JavaScript code using PHP's HEREDOC syntax and call it from your frontend. The JavaScript code will be executed without sending any requests to your backend.

1<?php
2 
3namespace App\Http\Livewire;
4 
5class Todos extends \Livewire\Component
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">Clear</button>
5</div>

/** @locked */ properties

Livewire v3 will support locked properties - properties that cannot be updated from the frontend. Add a /** @locked / comment above a property on your component, and Livewire will throw an exception if someone attempts to update that property from the frontend.

1<?php
2 
3namespace App\Http\Livewire;
4 
5class Todos extends \Livewire\Component
6{
7 /** @locked */
8 public $todos = [];
9}

wire:model is deferred by default

When Livewire was first released, it was primarily meant for writing 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're using Livewire to build all kinds of apps. As Livewire and its usage have evolved, we've realized that the "deferred" behavior makes more sense for 95% of forms, so in v3 "deferred" functionality will be the default. This will save on unnecessary requests going to your server and improve performance.

When you need the "live" functionality on an input, you may use wire:model.live to enable that functionality.

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

Requests are batched

In Livewire v2, if you have multiple components using wire:poll or dispatching and listening for events, each one of those components will send separate requests to the server on each poll or event. In Livewire v3, there is intelligent batching of requests so that wire:polls, events, listeners, and method calls can be batched into one request when possible, saving even more requests and improving performance.

Reactive properties

When using nested components in Livewire v2, if a property on the parent component is updated, the child component's data is not automatically kept in sync. There are manual workarounds using events and listeners, but it's not ideal. In Livewire v3, when you pass a piece of data to a child component, add a /** @prop */ comment above the property in the child, then update it in the parent component, it will be updated in the child component.

1<?php
2 
3namespace App\Http\Livewire;
4 
5class TodosCount extends \Livewire\Component
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 pain point in Livewire v2 is "modelling" a property from a parent to a child component. Say you wanted a <livewire:todo-input /> component. It's not easy to pass in a value then have it automatically updated in the parent anytime it's updated in the child. In Livewire v3, you can add wire:model when using the input component, then inside the input component add a /** @modelable */ comment above the property where you're storing the value for the component and Livewire will handle the rest.

1<?php
2 
3namespace App\Http\Livewire;
4 
5class Todos extends \Livewire\Component
6{
7 public $todo = '';
8 
9 public $todos = [];
10 
11 public function add() ...
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<?php
2 
3namespace App\Http\Livewire;
4 
5class TodoInput extends \Livewire\Component
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}

Access parent component's data and methods using $parent

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

1<?php
2 
3namespace App\Http\Livewire;
4 
5class TodoInput extends \Livewire\Component
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 new @teleport Blade directive that will allow you to "teleport" a piece of markup and render it another part of the DOM. This can sometimes help avoid z-index issues with modals and slideouts.

1<div>
2 <button wire:click="showModal">Show modal</button>
3 
4 @teleport('#footer')
5 <x-modal wire:model="showModal">
6 <!-- ... -->
7 </x-modal>
8 @endteleport
9</div>

Lazy components

Livewire v3 will introduce "lazy" components. If you have a component that takes a while to load due to some expensive query or is rendered in a slideout that isn't always opened, you might want to wait to load it until it's shown on the page. In Livewire v3, just add a lazy attribute when rendering a component and it won't be rendered initially. When it comes into the viewport, Livewire will fire off a request to render it. You'll also be able to add placeholder content by implementing the placeholder method on your component.

1<div>
2 <button wire:click="showModal">Show modal</button>
3 
4 @teleport('#footer')
5 <x-modal wire:model="showModal">
6 <livewire:example-component lazy />
7 </x-modal>
8 @endteleport
9</div>
1<?php
2 
3namespace App\Http\Livewire;
4 
5class ExampleComponent extends \Livewire\Component
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'll be abe to add wire:navigate to any anchor tag, and when clicked, Livewire will fetch the page in the background, then swap the DOM out really quickly giving your app a more SPA-like feel. If you add the .prefetch modifier as well, Livewire will prefetch the link's contents as soon as the link is hovered, making it feel even faster!

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

@persist

Another really cool Blade directive Livewire v3 will include is @persist. Using @persist in combination with wire:navigate, will enable you to have parts of your apps that "persist" across page changes. A good example of this functionality is a podcast player that continues to play while you move around in the app.

1<!DOCTYPE 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
13</body>
14</html>

New laravel-livewire.com design

Last but not least, the Livewire site and docs are getting a fresh new design!


  • Share This:  
  •  Facebook
  •  Twitter
  •  Google+
  •  Stumble
  •  Digg
Email ThisBlogThis!Share to XShare to Facebook

Related Posts:

  • Ajax LARAVEL 419 POST error QuestionI would really appreciate some help on this. I tried tons of solutions as posted in this forum, but I cannot get it to work.My ajax call… Read More
  • Cannot use object of type stdClass as array? Cannot use object of type stdClass as array?  563 94 … Read More
  • Laravel blade @if 3 varabile <?phplaravel blade @if 3 varabile@forelse ($users as $user)    <li>{{ $user… Read More
  • Laravel where multiple conditionsLaravel where multiple conditions$query->where([    ['column_1', '=', 'value_1'],    ['column_2',… Read More
  • Laravel check if eloquent just created <?phplaravel check if eloquent just created$item = Item::firstOrCreate(['title' => 'Example&n… Read More
Newer Post Older Post Home

0 comments:

Post a Comment

Thanks

Meta

Popular Posts

  • Vue3 :style backgroundImage not working with require
    I'm trying to migrate a Vue 2 project to Vue 3. In Vue 2 I used v-bind style as follow: In Vue 3 this doesn't work... I tried a...
  • Features CodeIgniter
    Features CodeIgniter There is a great demand for the CodeIgniter framework in PHP developers because of its features and multiple advan...
  • SQL ORDER BY Keyword
      The SQL ORDER BY Keyword The ORDER BY keyword is used to sort the result-set in ascending or descending order. The ORDER BY keyword sorts ...
  • failed to load storage framework cache laravel excel
       User the export file and controller function  ..         libxml_use_internal_errors ( true ); ..Good To Go   public function view () : ...
  • Laravel Breeze with PrimeVue v4
    This is an follow up to my previous post about a "starter kit" I created with Laravel and PrimeVue components. The project has b...

Categories

  • Ajax (26)
  • Bootstrap (30)
  • DBMS (42)
  • HTML (12)
  • HTML5 (45)
  • JavaScript (10)
  • Jquery (34)
  • Jquery UI (2)
  • JqueryUI (32)
  • Laravel (1017)
  • Laravel Tutorials (23)
  • Laravel-Question (6)
  • Magento (9)
  • Magento 2 (95)
  • MariaDB (1)
  • MySql Tutorial (2)
  • PHP-Interview-Questions (3)
  • Php Question (13)
  • Python (36)
  • RDBMS (13)
  • SQL Tutorial (79)
  • Vue.js Tutorial (68)
  • Wordpress (150)
  • Wordpress Theme (3)
  • codeigniter (108)
  • oops (4)
  • php (853)

Social Media Links

  • Follow on Twitter
  • Like on Facebook
  • Subscribe on Youtube
  • Follow on Instagram

Pages

  • Home
  • Contact Us
  • Privacy Policy
  • About us

Blog Archive

  • September (100)
  • August (50)
  • July (56)
  • June (46)
  • May (59)
  • April (50)
  • March (60)
  • February (42)
  • January (53)
  • December (58)
  • November (61)
  • October (39)
  • September (36)
  • August (36)
  • July (34)
  • June (34)
  • May (36)
  • April (29)
  • March (82)
  • February (1)
  • January (8)
  • December (14)
  • November (41)
  • October (13)
  • September (5)
  • August (48)
  • July (9)
  • June (6)
  • May (119)
  • April (259)
  • March (122)
  • February (368)
  • January (33)
  • October (2)
  • July (11)
  • June (29)
  • May (25)
  • April (168)
  • March (93)
  • February (60)
  • January (28)
  • December (195)
  • November (24)
  • October (40)
  • September (55)
  • August (6)
  • July (48)
  • May (2)
  • January (2)
  • July (6)
  • June (6)
  • February (17)
  • January (69)
  • December (122)
  • November (56)
  • October (92)
  • September (76)
  • August (6)

  • Failed to install 'cordova-plugin-firebase': CordovaError: Uh oh - 9/21/2024
  • pyspark XPath Query Returns Lists Omitting Missing Values Instead of Including None - 9/20/2024
  • SQL REPL from within Python/Sqlalchemy/Psychopg2 - 9/20/2024
  • MySql Explain with Tobias Petry - 9/20/2024
  • How to combine information from different devices into one common abstract virtual disk? [closed] - 9/20/2024

Laravel News

  • Simplify API Responses with Fluent Methods - 6/6/2025
  • Fathom Analytics Events for Laravel Livewire - 6/6/2025
  • Replace String Prefixes Precisely with Laravel's replaceStart Method - 5/31/2025
  • Clean Up Your Code with the whenHas Method - 6/5/2025
  • Laravel OpenRouter - 6/4/2025

Copyright © 2025 CoderFunda | Powered by Blogger
Design by Coderfunda | Blogger Theme by Coderfunda | Distributed By Coderfunda