Everything New in Livewire 4

Discover Livewire 4: tour its new features, learn the vision, and get set up to build reactive interfaces—perfect for upgrades or new projects.

Co-locate PHP and Blade in a single file with Livewire 4's view-based components, single or multi-file formats for easier discovery and maintenance.

Build entire pages with Livewire using Route::livewire—manage layouts, page titles, and namespaces for organized, maintainable apps.

Install Flux, Livewire's official UI library, to get beautiful form controls, cards, and layouts so you can build polished apps quickly.

Learn Livewire unit testing with Pest: test component state, trigger actions, and assert rendered output for reliable, maintainable apps.

Write Playwright-powered browser tests with Pest v4 and Livewire: run real browsers, click, type, and verify behavior as users experience it.

Keep tests next to components with Livewire's artisan commands—learn when co-located tests simplify organization and speed developer workflow.

Use Livewire 4's data-loading attribute with Tailwind variants to style loading states directly in markup—no wire:target or workarounds needed.

Use Livewire's @placeholder directive to add skeleton loaders and spinners in component templates, keeping lazy-loading UI simple and concise.

Combine lazy Livewire requests with the bundle parameter to group deferred components into one network call - fewer requests, faster pages.

Forward HTML attributes in Livewire: pass classes and Alpine directives into components and apply them to inner elements for cleaner, reusable UI.

Master Livewire slots: pass Blade content into child components while preserving parent reactivity for cleaner, flexible component composition.

Build snappy, optimistic UIs with Livewire's wire:show and wire:text — toggle elements instantly client-side for faster, smoother user interactions.

Learn Livewire 4 Islands to create isolated, independently updating regions for better performance without extra files, props, or events.

Name your Islands to group and target updates with wire:island—learn naming strategies to control re-renders and sync components.

Use Lazy Islands to defer expensive parts until after page load—keep your page fast while slow components load when ready.

Master nested Islands to control component re-renders, use always:true for forced updates, and learn when nesting improves performance.

Learn to append content with wire:island.append for infinite scroll, pagination, and real-time feeds—efficient updates without re-rendering lists.

Add drag-and-drop sorting with Livewire 4's wire:sort — automatic reordering, animations, ghost elements, handles, and multi-group dragging.

Name elements with wire:ref to target DOM or components, access $refs, dispatch events, and stream content to specific locations.

Use $wire.$dirty() to detect unsaved changes in Livewire properties, show indicators, disable buttons, and provide instant UI feedback.

Mark actions with #[Json] to return JSON to Alpine or vanilla JS without re-rendering — fetch data and handle success or validation via promises.

Easily run lightweight client-side code in Livewire using $js: define JS functions in your component and call them from wire directives.

Control Livewire actions with $wire.intercept(): cancel requests, show loaders, save scroll, and run custom side effects before server calls.

Hook every Livewire request globally with interceptors — handle session expiration, custom redirects, logging, and automatic error recovery.