> ## Documentation Index > Fetch the complete documentation index at: https://kawax.biz/llms.txt > Use this file to discover all available pages before exploring further. # ⚡ Getting started with Livewire 4 — reactive UIs without JavaScript > Learn how to build interactive UIs without writing JavaScript using Laravel's first-party Livewire 4 package, from installation to practical code examples. ## What is Livewire? Building a dynamic UI in Laravel used to mean combining a JavaScript framework like Vue.js or React, or writing AJAX requests yourself. **Livewire** is a Laravel package that solves this problem. It lets you build reactive UIs using PHP and Blade only. Features that traditionally required JavaScript—real-time form validation, live search, counters, etc.—can all be implemented in PHP. Livewire 4 works on Laravel 10 or later and PHP 8.1 or later. The current latest version is Livewire 4. ### How it works A Livewire component is a combination of a PHP class on the server and a Blade template. When a user clicks a button or types into a form, Livewire sends an AJAX request in the background, executes PHP, and applies only the changed portions to the page. You can write everything in PHP without worrying about this mechanism. *** ## Installation Run the following command in the root of your Laravel application. ```shell theme={null} composer require livewire/livewire ``` Laravel's package auto-discovery is enabled, so no additional configuration is required. ### Creating a layout file If you use it as a full-page component, a layout file is needed. You can generate one with this Artisan command: ```shell theme={null} php artisan livewire:layout ``` This generates `resources/views/layouts/app.blade.php`: ```blade theme={null} {{ $title ?? config('app.name') }} @vite(['resources/css/app.css', 'resources/js/app.js']) @livewireStyles {{ $slot }} @livewireScripts ``` `@livewireStyles` and `@livewireScripts` automatically load the Livewire and Alpine.js assets. *** ## Your first component An Artisan command is provided to generate Livewire components. Let's build a simple counter. ```shell theme={null} php artisan make:livewire Counter ``` This command creates a single-file component at `resources/views/components/⚡counter.blade.php`. The ⚡ in the filename makes Livewire components identifiable at a glance. It improves editor visibility. You can disable it in the configuration if you prefer. Edit the generated file as follows. ```blade theme={null} count++; } public function decrement(): void { $this->count--; } }; ?>

Count: {{ $count }}

``` Embed this component in a Blade template using the ordinary Blade component syntax. ```blade theme={null} ``` Every button click updates the count without a page reload. `wire:click` calls a PHP method instead of running JavaScript. *** ## Properties and actions ### Properties — `wire:model` The `wire:model` directive two-way binds an input element to a component property. ```blade theme={null}

Hello, {{ $name }} ({{ $email }})

``` By default `wire:model` only syncs with the server when an action (like a form submit) fires. If you want to sync on each keystroke, add the `.live` modifier. | Syntax | Behavior | | ---------------------- | --------------------------------------- | | `wire:model` | Sync only when an action runs (default) | | `wire:model.live` | Send a request on every input | | `wire:model.blur` | Sync on blur (no request) | | `wire:model.live.blur` | Send a request on blur | ### Actions — `wire:click` and `wire:submit` `wire:click` binds click events to methods, and `wire:submit` binds form submission events. ```blade theme={null} $this->taskName]); $this->taskName = ''; } public function render() { return $this->view([ 'tasks' => Task::latest()->get(), ]); } }; ?>

{{ $task->name }}

``` *** ## Real-time validation In Livewire 4, the `#[Validate]` attribute lets you define validation rules directly on properties. ```blade theme={null} validate(); Post::create([ 'title' => $this->title, 'content' => $this->content, ]); $this->reset(['title', 'content']); session()->flash('message', 'Post saved.'); } }; ?>

@if (session('message'))

@endif

``` Properties annotated with `#[Validate]` run automatic validation on every update. Combined with `wire:model.live.blur`, you get a real-time validation experience where the error message appears the moment focus leaves the field. `$this->validate()` validates all properties together on form submission. The recommended pattern is to combine automatic validation via `#[Validate]` with an explicit final validation. *** ## Lifecycle hooks Livewire components have several lifecycle hooks. | Hook | Timing | | ----------------------------- | ------------------------------------------------------ | | `mount()` | When the component is first created (only once) | | `boot()` | At the start of every request (initial and subsequent) | | `updating($property, $value)` | Just before a property updates | | `updated($property)` | Just after a property updates | | `rendering()` | Before the view renders | | `rendered()` | After the view renders | | `dehydrate()` | At the end of every request | ### `mount()` — initialization Use `mount()` to initialize a component. It replaces the constructor. ```blade theme={null} name = Auth::user()->name; $this->email = Auth::user()->email; } }; ?>

Name: {{ $name }}

Email: {{ $email }}

``` ### `updated()` — after property changes If you want to run logic after a property updates, use `updated()`. To target a specific property, include it in the method name. ```blade theme={null} username = strtolower($this->username); } }; ?>

Username: {{ $username }}

``` Every keystroke is automatically converted to lowercase. *** ## Laravel integration ### Working with Eloquent models Livewire can hold Eloquent models directly as properties. ```blade theme={null} user = $user; } #[Validate('required|min:2')] public string $name = ''; public function save(): void { $this->validate(); $this->user->update(['name' => $this->name]); session()->flash('message', 'Profile updated.'); } public function render() { return $this->view(); } }; ?>

@if (session('message'))

@endif

``` ### Form objects Extracting complex forms into form objects keeps components simple. ```shell theme={null} php artisan livewire:form PostForm ``` ```php theme={null} namespace App\Livewire\Forms; use Livewire\Attributes\Validate; use Livewire\Form; use App\Models\Post; class PostForm extends Form { #[Validate('required|min:3')] public string $title = ''; #[Validate('required|min:10')] public string $content = ''; public function store(): void { Post::create($this->only(['title', 'content'])); } } ``` Use the form object from a component. ```blade theme={null} form->validate(); $this->form->store(); $this->form->reset(); session()->flash('message', 'Post created.'); } }; ?>

``` *** ## Summary Here's where Livewire is especially well-suited: | Use case | What Livewire enables | | -------------------- | -------------------------------------- | | Form handling | Real-time validation and error display | | Data lists | Live search, sorting, and pagination | | Counters and toggles | UI updates without a page reload | | Admin panels | CRUD via direct Eloquent integration | | Wizard-style forms | Step management in PHP | If you've used Blade before, you can start writing Livewire today. Its biggest strength is delivering interactive UIs without the learning curve of a JavaScript framework. For SPA-level advanced interactions, Inertia.js is the better fit, but for forms, admin panels, and data tables, Livewire is often simpler to build. Try starting with one small component. See the official documentation for Livewire's full feature set (file uploads, pagination, testing, and more). ## Related topics - [Getting started with Svelte — the essentials for using it with Inertia × Laravel](/en/blog/svelte-introduction.md) - [Knowledge required before starting Laravel](/en/true-tutorial.md) - [Getting started with React — the essentials for using it with Inertia × Laravel](/en/blog/react-introduction.md) - [Getting started with Vue.js — the essentials for using it with Inertia × Laravel](/en/blog/vue-introduction.md) - [Frontend](/en/frontend.md)