What’s New in Livewire v3 Laravel Framework?

Laravel Livewire is a great tool to achieve dynamic behavior on a web page, without directly writing JavaScript code. It makes building dynamic interfaces simple, without leaving the comfort of Laravel. Recently, Livewire core has been completely rewritten.

The new Livewire v3 has better diffing, features can be built faster, and there is less duplication between Livewire and Alpine because it relies more on Alpine and uses its Morph, History, and other plugins. Several of the new features were also made possible by restructuring the codebase and placing a greater emphasis on Alpine.

4

1. Inject Livewire Scripts, Styles, and Alpine Automatically

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

2. JavaScript Functions in 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.

3. 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.

4. Wire:model Is Deferred by Default

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.

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

livewire laravel framework source code

5. Requests Are Batched

In Livewire v2, if you have multiple components using wire:poll ordispatching 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.

6. Reactive Properties

In Livewire v3, when youpass 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.

7. 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.

8. 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.

9. Lazy Components

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.

Simplicity and Power in Livewire V3

The combination of simplicity and power is what makesLaravel Livewireso awesome and why it is used by so many developers. It is especially a good alternative to the Laravel + Inertia + Vue combination. In particular Laravel is also bundled up with other frameworks which are powerful and to work with.

PHP framework Laravel is now at version 8. Here’s a look at the new web development features you can expect.

6 JavaScript Frameworks Worth Learning-Featured

If an AI can roast you, it can also prep you for emergencies.

Free AI tools are legitimately powerful; you just need to know how to stack them.

running prompt chatgpt security advisor role

You don’t need to fork out for expensive hardware to run an AI on your PC.

You’ve been quoting these famous films wrong all along!

AI Chatbots open in multiple tabs

Unlock a world of entertainment possibilities with this clever TV hack.

Technology Explained

PC & Mobile