Livewire

https://github.com/livewire/livewire
Admin
Livewire is a full-stack Laravel framework for building dynamic UI components in PHP and Blade,...
Tokens:1,104,449
Snippets:6,364
Trust Score:9.2
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Clone and setup Livewire repository

Source: https://github.com/livewire/livewire/blob/4.x/README.md

Clones the Livewire repository and runs the setup command to install PHP and JS dependencies and set up ChromeDriver for browser tests.

```bash
git clone git@github.com:livewire/livewire.git && cd livewire
composer setup
```

--------------------------------

### See also example for directive pages

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Example 'See also' section for directive pages like wire:model. Shows how to link to related guides and concepts.

```markdown
## See also

- **[Forms](/docs/4.x/forms)** — Complete guide to building forms with Livewire
- **[Properties](/docs/4.x/properties)** — Understand data binding and property management
- **[Validation](/docs/4.x/validation)** — Validate bound properties in real-time
```

--------------------------------

### Install Volt via Composer

Source: https://github.com/livewire/livewire/blob/4.x/docs/volt.md

Command to install the livewire/volt package using Composer.

```bash
composer require livewire/volt
```

--------------------------------

### Install Livewire with Composer

Source: https://github.com/livewire/livewire/blob/4.x/docs/installation.md

Run this command in your Laravel application directory to install Livewire via Composer. No additional setup is required due to Laravel's package auto-discovery.

```shell
composer require livewire/livewire
```

--------------------------------

### See also example for foundational pages

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Example 'See also' section for foundational pages like Properties. Shows how to link to related features with concise descriptions.

```markdown
## See also

- **[Forms](/docs/4.x/forms)** — Bind properties to form inputs with wire:model
- **[Computed Properties](/docs/4.x/computed-properties)** — Create derived values with automatic memoization
- **[Validation](/docs/4.x/validation)** — Validate property values before persisting
- **[Locked Attribute](/docs/4.x/attribute-locked)** — Prevent properties from being manipulated client-side
```

--------------------------------

### Advanced hydration example with todos component

Source: https://github.com/livewire/livewire/blob/4.x/docs/hydration.md

Example of a component with a collection property, demonstrating how Livewire handles non-primitive types.

```php
<?php

use Livewire\Component;

new class extends Component {
    public $todos;

    public function mount() {
        $this->todos = collect([
            'first',
            'second',
            'third',
        ]);
    }
};
```

--------------------------------

### See also example for feature pages

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Example 'See also' section for feature pages like Islands. Demonstrates linking to alternative approaches and performance optimizations.

```markdown
## See also

- **[Nesting](/docs/4.x/nesting)** — Alternative approach using child components
- **[Lazy Loading](/docs/4.x/lazy)** — Defer loading of expensive content
- **[Computed Properties](/docs/4.x/computed-properties)** — Optimize island performance with memoization
```

--------------------------------

### Install Pest browser plugin and Playwright

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Required setup for browser testing with Pest v4. First, install the browser plugin via Composer. Then install Playwright via npm and ensure browsers are downloaded with `npx playwright install`. This enables using `Livewire::visit()` in tests.

```shell
composer require pestphp/pest-plugin-browser --dev
```

```shell
npm install playwright@latest
npx playwright install
```

--------------------------------

### Good Example: Passing Parameters to mount()

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Example of a good test that passes parameters to mount() and asserts a property value. Use this pattern to demonstrate realistic usage with context.

```php
// Shows how to pass parameters to mount()
Livewire::test('post.edit', ['post' => $post])
    ->assertSet('title', 'Existing post title');
```

--------------------------------

### Real-time notification bell example

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-on.md

A practical example of a component that listens for notification events to update its state.

```php
<?php // resources/views/components/⚡notification-bell.blade.php

use Livewire\Attributes\On;
use Livewire\Component;

new class extends Component {
    public $unreadCount = 0;

    public function mount()
    {
        $this->unreadCount = auth()->user()->unreadNotifications()->count();
    }

    #[On('notification-sent')] // [tl! highlight]
    public function incrementCount()
    {
        $this->unreadCount++;
    }

    #[On('notifications-read')] // [tl! highlight]
    public function resetCount()
    {
        $this->unreadCount = 0;
    }
};
?>

<button class="relative">
    <svg><!-- Bell icon --></svg>
    @if($unreadCount > 0)
        <span class="absolute -top-1 -right-1 bg-red-500 text-white rounded-full px-2 py-1 text-xs">
            {{ $unreadCount }}
        </span>
    @endif
</button>
```

```php
// From anywhere in your app
$this->dispatch('notification-sent');
```

--------------------------------

### Start Laravel development server

Source: https://github.com/livewire/livewire/blob/4.x/docs/quickstart.md

Run this command to start the Laravel development server if it's not already running. Then visit http://localhost:8000/post/create in your browser.

```shell
php artisan serve
```

--------------------------------

### Import and start Livewire and Alpine in app.js

Source: https://github.com/livewire/livewire/blob/4.x/docs/installation.md

Imports Livewire and Alpine from the vendor directory, registers an Alpine plugin, and starts Livewire. Remember to rebuild assets after Livewire updates.

```js
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'

Alpine.plugin(Clipboard)

Livewire.start()
```

--------------------------------

### Install Volt service provider

Source: https://github.com/livewire/livewire/blob/4.x/docs/volt.md

Artisan command to install Volt's service provider file, which specifies mounted directories for single-file components.

```bash
php artisan volt:install
```

--------------------------------

### Basic CreatePost component with plain string property

Source: https://github.com/livewire/livewire/blob/4.x/docs/synthesizers.md

A basic Livewire component with a plain string property. This is the starting point for the Synthesizer examples.

```php
class CreatePost extends Component
{
    public $title = '';
}
```

--------------------------------

### Livewire Todos component with morphing example

Source: https://github.com/livewire/livewire/blob/4.x/docs/morph.md

A complete Todos component example: the PHP class manages a todo list, the Blade template renders it with wire:key on each item, and the two HTML blocks show the initial render and the render after adding 'third'. The final HTML includes a [tl! add] marker to highlight the newly added <li> element.

```php
class Todos extends Component
{
    public $todo = '';

    public $todos = [
        'first',
        'second',
    ];

    public function add()
    {
        $this->todos[] = $this->todo;
    }
}
```

```blade
<form wire:submit="add">
    <ul>
        @foreach ($todos as $item)
            <li wire:key="{{ $loop->index }}">{{ $item }}</li>
        @endforeach
    </ul>

    <input wire:model="todo">
</form>
```

```html
<form wire:submit="add">
    <ul>
        <li>first</li>

        <li>second</li>
    </ul>

    <input wire:model="todo">
</form>
```

```html
<form wire:submit="add">
    <ul>
        <li>first</li>

        <li>second</li>

        <li>third</li> <!-- [tl! add] -->
    </ul>

    <input wire:model="todo">
</form>
```

--------------------------------

### Install Livewire v4 via Composer

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Run this command to require Livewire v4 in your project. This is the first step in upgrading from v3.

```bash
composer require livewire/livewire:^4.0
```

--------------------------------

### wire:navigate directive reference

Source: https://github.com/livewire/livewire/blob/4.x/docs/wire-navigate.md

The bare wire:navigate directive as a reference example.

```blade
wire:navigate
```

--------------------------------

### Define a Customer class

Source: https://github.com/livewire/livewire/blob/4.x/docs/properties.md

A basic Customer class with protected properties and a constructor. This is the starting point for the Wireable example.

```php
class Customer
{
    protected $name;
    protected $age;

    public function __construct($name, $age)
    {
        $this->name = $name;
        $this->age = $age;
    }
}
```

--------------------------------

### Deeply nested tuple example with Stringable

Source: https://github.com/livewire/livewire/blob/4.x/docs/hydration.md

Example of a component with a collection containing a Stringable, demonstrating deep nesting.

```php
<?php

use Livewire\Component;

new class extends Component {
    public $todos;

    public function mount() {
        $this->todos = collect([
            'first',
            'second',
            str('third'),
        ]);
    }
};
```

--------------------------------

### Unit test example for Livewire

Source: https://github.com/livewire/livewire/blob/4.x/docs/contribution-guide.md

Example unit test class that extends Tests\TestCase. Unit tests focus on the PHP implementation of Livewire and should be added to UnitTest.php.

```php
use Tests\TestCase;

class UnitTest extends TestCase
{
    public function test_livewire_can_run_action(): void
    {
       // ...
    }
}
```

--------------------------------

### Example URL with search query parameter

Source: https://github.com/livewire/livewire/blob/4.x/docs/url.md

Shows the resulting URL when the search value is 'bob' after adding the #[Url] attribute. This URL can be shared or bookmarked to preserve the search state.

```text
https://example.com/users?search=bob
```

--------------------------------

### Browser test example for Livewire

Source: https://github.com/livewire/livewire/blob/4.x/docs/contribution-guide.md

Example browser test class that extends Tests\BrowserTestCase. Browser tests run steps in a real browser and focus on the Javascript implementation of Livewire; they should be added to BrowserTest.php.

```php
use Tests\BrowserTestCase;

class BrowserTest extends BrowserTestCase
{
    public function test_livewire_can_run_action()
    {
        // ...
    }
}
```

--------------------------------

### Dangerous async state mutation example

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-async.md

Warning: This example shows what NOT to do. Using #[Async] on an action that mutates component state can lead to race conditions and lost updates. The comment in the code explicitly marks it as a dangerous example.

```php
<?php // resources/views/components/⚡counter.blade.php

use Livewire\Attributes\Async;
use Livewire\Component;

new class extends Component {
    public $count = 0;

    #[Async] // Don't do this! [tl! highlight]
    public function increment()
    {
        $this->count++; // State mutation in an async action [tl! highlight]
    }
};
```

--------------------------------

### CSP headers example for Livewire CSP-safe build

Source: https://github.com/livewire/livewire/blob/4.x/docs/csp.md

Example Content-Security-Policy header that works with Livewire's CSP-safe build. It uses nonce-based script loading and strict-dynamic, and removes 'unsafe-eval'.

```http
Content-Security-Policy: default-src 'self';
                        script-src 'nonce-[random]' 'strict-dynamic';
                        style-src 'self' 'unsafe-inline';
```

--------------------------------

### File path comment examples for components and pages

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Examples of file path comments for simple components, nested/RESTful components, and pages. The comments indicate where the component Blade file should be placed.

```php
// Simple components
<?php // resources/views/components/⚡todos.blade.php

// Nested/RESTful components
<?php // resources/views/components/post/⚡create.blade.php
<?php // resources/views/components/post/⚡edit.blade.php

// Pages
<?php // resources/views/pages/post/⚡create.blade.php
```

--------------------------------

### Support wire:model binding with get() and set() in AddressSynth

Source: https://github.com/livewire/livewire/blob/4.x/docs/synthesizers.md

Adds get() and set() methods to an AddressSynth to support wire:model binding directly to properties of the Address object. The get() method returns the property value, and set() assigns it, enabling two-way data binding.

```php
use App\Dtos\Address;

class AddressSynth extends Synth
{
    public static $key = 'address';

    public static function match($target)
    {
        return $target instanceof Address;
    }

    public function dehydrate($target)
    {
        return [[
            'street' => $target->street,
            'city' => $target->city,
            'state' => $target->state,
            'zip' => $target->zip,
        ], []];
    }

    public function hydrate($value)
    {
        $instance = new Address;

        $instance->street = $value['street'];
        $instance->city = $value['city'];
        $instance->state = $value['state'];
        $instance->zip = $value['zip'];

        return $instance;
    }

    public function get(&$target, $key) // [tl! highlight:8]
    {
        return $target->{$key};
    }

    public function set(&$target, $key, $value)
    {
        $target->{$key} = $value;
    }
}
```

--------------------------------

### Fork and clone Livewire repository

Source: https://github.com/livewire/livewire/blob/4.x/docs/contribution-guide.md

Commands to fork and clone the Livewire repository using GitHub CLI, install Composer dependencies, and configure Dusk.

```shell
# Fork and clone Livewire
gh repo fork livewire/livewire --default-branch-only --clone=true -- livewire

# Switch the working directory to livewire
cd livewire

# Install all composer dependencies
composer install

# Ensure Dusk is correctly configured
vendor/bin/dusk-updater detect --no-interaction
```

--------------------------------

### setUpdateRoute with $path parameter for hash-based endpoint

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Update setUpdateRoute to use the $path parameter to preserve the hash-based endpoint. The v3 example uses a hardcoded '/livewire/update' route, while v4 uses the $path parameter.

```php
// Before (v3)
Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/livewire/update', $handle);
});

// After (v4)
Livewire::setUpdateRoute(function ($handle, $path) {
    return Route::post($path, $handle);
});
```

--------------------------------

### Pest test for creating a post

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Pest test example for creating a post with Livewire, using Livewire::test to set properties and call methods.

```php
it('can create a post', function () {
    expect(Post::count())->toBe(0);

    Livewire::test('post.create')
        ->set('title', 'My new post')
        ->call('save');

    expect(Post::count())->toBe(1);
});
```

--------------------------------

### Info callout example

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Use an info callout for neutral context. Keep titles short and use sentence case.

```markdown
> [!info] When to use browser tests
> Use browser tests for critical user flows and complex interactions.
```

--------------------------------

### Use package components in Blade

Source: https://github.com/livewire/livewire/blob/4.x/docs/packages.md

Usage examples for components registered under the 'mypackage' namespace. Use the namespace prefix followed by the component name or subdirectory path.

```blade
<livewire:mypackage::counter />
<livewire:mypackage::users.table />
```

--------------------------------

### Shareable URL for filtered products

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-url.md

Example URL that users can share to reproduce the filtered product view, with query parameters matching the #[Url] attributes in the product filtering example.

```text
https://example.com/products?q=laptop&category=electronics&minPrice=500&maxPrice=1500&sort=price
```

--------------------------------

### Update test files from Volt::test to Livewire::test

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Replace `Livewire\Volt\Volt` with `Livewire\Livewire` and change `Volt::test()` to `Livewire::test()` in test files. The before and after examples show the required changes.

```php
// Before (Volt)
use Livewire\Volt\Volt;

Volt::test('counter')

// After (Livewire v4)
use Livewire\Livewire;

Livewire::test('counter')
```

--------------------------------

### Tip callout example

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Use a tip callout for positive, helpful information. Keep titles short (3-6 words) and use sentence case.

```markdown
> [!tip] Smoke tests provide huge value
> Tests like these provide enormous value as they require very little maintenance.
```

--------------------------------

### Warning callout example

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Use a warning callout for potential issues. Keep titles short and use sentence case.

```markdown
> [!warning] Must teleport outside the component
> Livewire only supports teleporting HTML outside your components.
```

--------------------------------

### Live search example - parent component

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-reactive.md

Parent component for a live search. It passes the computed posts to a child component using the reactive attribute.

```php
<?php // resources/views/components/⚡search.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public $query = '';

    public function posts()
    {
        return Post::where('title', 'like', "%{$this->query}%")->get();
    }
};
?>

<div>
    <input type="text" wire:model.live="query" placeholder="Search posts...">

    <livewire:search-results :posts="$this->posts()" /> <!-- [tl! highlight] -->
</div>
```

--------------------------------

### CSS nesting transformation for scoping

Source: https://github.com/livewire/livewire/blob/4.x/docs/styles.md

Livewire wraps your styles in a selector targeting the component's root element using CSS nesting. The example shows what you write and what gets served.

```css
/* What you write */
.btn { background: blue; }

/* What gets served */
[wire\:name="counter"] {
    .btn { background: blue; }
}
```

--------------------------------

### Live search example - child component with #[Reactive]

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-reactive.md

Child component for live search results. The #[Reactive] attribute ensures the child updates when the parent's posts change.

```php
<?php // resources/views/components/⚡search-results.blade.php

use Livewire\Attributes\Reactive;
use Livewire\Component;

new class extends Component {
    #[Reactive] // [tl! highlight]
    public $posts;
};
?>

<div>
    @foreach($posts as $post)
        <div wire:key="{{ $post->id }}">{{ $post->title }}</div>
    @endforeach
</div>
```

--------------------------------

### Intercept Livewire's validator with withValidator to add custom validation

Source: https://github.com/livewire/livewire/blob/4.x/docs/validation.md

Use the withValidator method in the boot method to access the Validator instance before validation rules are evaluated. The closure receives the validator, allowing you to call methods like after to add custom validation logic. In this example, a custom error is added if the title starts with a quotation mark.

```php
use Livewire\Attributes\Validate;
use Livewire\Component;
use App\Models\Post;

class CreatePost extends Component
{
    #[Validate('required|min:3')]
\tpublic $title = '';

    #[Validate('required|min:3')]
    public $content = '';

    public function boot()
    {
        $this->withValidator(function ($validator) {
            $validator->after(function ($validator) {
                if (str($this->title)->startsWith('"')) {
                    $validator->errors()->add('title', 'Titles cannot start with quotations');
                }
            });
        });
    }

    public function save()
    {
\t\tPost::create($this->all());

\t\treturn redirect()->to('/posts');
    }

    // ...
}
```

--------------------------------

### Download using Storage facade

Source: https://github.com/livewire/livewire/blob/4.x/docs/downloads.md

Use the Storage facade to initiate a file download from a specific disk, similar to a Laravel controller.

```php
public function download()
{
    return Storage::disk('invoices')->download('invoice.csv');
}
```

--------------------------------

### Enable Smart Wire:key Default

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Set 'smart_wire_keys' to true to enable the new default behavior. Note that you still need to add wire:key manually in loops.

```php
// Now defaults to true (was false in v3)
'smart_wire_keys' => true,
```

--------------------------------

### URL for the default paginator page 2

Source: https://github.com/livewire/livewire/blob/4.x/docs/pagination.md

Example URL when navigating to page 2 of the clients paginator. Shows the default 'page' query parameter used by the first paginator.

```text
http://application.test/?page=2
```

--------------------------------

### Link Alpine packages to Livewire and build

Source: https://github.com/livewire/livewire/blob/4.x/docs/contribution-guide.md

Commands to switch back to the Livewire directory, link all Alpine packages, and build Livewire.

```shell
# Switch the working directory back to livewire
cd ../livewire

# Link all packages
npm link alpinejs @alpinejs/anchor @alpinejs/collapse @alpinejs/csp @alpinejs/docs @alpinejs/focus @alpinejs/history @alpinejs/intersect @alpinejs/mask @alpinejs/morph @alpinejs/navigate @alpinejs/persist @alpinejs/sort @alpinejs/ui

# Build Livewire
npm run build
```

--------------------------------

### Install Pest in Laravel

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Removes PHPUnit and installs Pest with all dependencies as a dev dependency. Run these commands in your Laravel application root.

```shell
composer remove phpunit/phpunit
composer require pestphp/pest --dev --with-all-dependencies
```

--------------------------------

### Fork and clone Alpine repository

Source: https://github.com/livewire/livewire/blob/4.x/docs/contribution-guide.md

Commands to fork and clone the Alpine repository using GitHub CLI, install npm dependencies, build all Alpine packages, and link them locally.

```shell
# Fork and clone Alpine
gh repo fork alpinejs/alpine --default-branch-only --clone=true --remote=false -- alpine

# Switch the working directory to alpine
cd alpine

# Install all npm dependencies
npm install

# Build all Alpine packages
npm run build

# Link all Alpine packages locally
cd packages/alpinejs && npm link && cd ../../
cd packages/anchor && npm link && cd ../../
cd packages/collapse && npm link && cd ../../
cd packages/csp && npm link && cd ../../
cd packages/docs && npm link && cd ../../
cd packages/focus && npm link && cd ../../
cd packages/history && npm link && cd ../../
cd packages/intersect && npm link && cd ../../
cd packages/mask && npm link && cd ../../
cd packages/morph && npm link && cd ../../
cd packages/navigate && npm link && cd ../../
cd packages/persist && npm link && cd ../../
cd packages/sort && npm link && cd ../../
cd packages/ui && npm link && cd ../../
```

--------------------------------

### With teleporting: nested modal stacking solution

Source: https://github.com/livewire/livewire/blob/4.x/docs/directive-teleport.md

Example showing the solution with teleporting: the child modal is rendered as a sibling at the body level, allowing backdrops to cover everything properly.

```blade
<div style="z-index: 10;">
    <!-- Parent modal -->

    @teleport('body')
        <div style="z-index: 20;">
            <!-- Child modal rendered as sibling at body level -->
            <!-- Backdrop can cover everything properly -->
        </div>
    @endteleport
</div>
```

--------------------------------

### Create a single-file component with make:livewire

Source: https://github.com/livewire/livewire/blob/4.x/docs/components.md

Run this Artisan command to create a new Livewire component in single-file format. The component is created at resources/views/components/post/⚡create.blade.php.

```shell
php artisan make:livewire post.create
```

--------------------------------

### Test a Volt component with Volt::test

Source: https://github.com/livewire/livewire/blob/4.x/docs/volt.md

Use the Volt::test method to test a Volt component. This example shows a basic test that asserts the initial value, calls a method, and asserts the updated value.

```php
use Livewire\Volt\Volt;

it('increments the counter', function () {
    Volt::test('counter')
        ->assertSee('0')
        ->call('increment')
        ->assertSee('1');
});
```

--------------------------------

### Bad Example: Generic Test Without Context

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Example of a bad test that lacks context and uses generic names. Avoid this pattern in documentation.

```php
// Generic example with no context
Livewire::test('some.component')
    ->assertSet('property', 'value');
```

--------------------------------

### Browser test using Livewire::visit()

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Instead of `Livewire::test()`, use `Livewire::visit()` to interact with a Livewire component in a real browser. This example types into fields, presses a save button, and asserts a success message. Browser tests are slower but provide end-to-end confidence for critical flows.

```php
it('can create a new post', function () {
    Livewire::visit('post.create')
        ->type('[wire\:model="title"]', 'My first post')
        ->type('[wire\:model="content"]', 'This is the content')
        ->press('Save')
        ->assertSee('Post created successfully');
});
```

--------------------------------

### Generate a Pest test file with make:livewire --test

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Run this artisan command to generate a Pest test file alongside a Livewire component. For single-file components, it creates `resources/views/components/post/⚡create.test.php` (or `⚡create/create.test.php` with `--mfc`). For class-based components, use `--class --test` to create `tests/Feature/Livewire/Post/CreateTest.php`.

```shell
php artisan make:livewire post.create --test
```

--------------------------------

### Manually navigate with Livewire.navigate()

Source: https://github.com/livewire/livewire/blob/4.x/docs/navigate.md

Call the Livewire.navigate() method from JavaScript to manually trigger a page visit, equivalent to using wire:navigate. Place the call after any setup code in a script block.

```html
<script>
    // ...

Livewire.navigate('/new/url')
</script>
```

--------------------------------

### PHP: Apply #[Transition] attribute to action methods

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-transition.md

Use the #[Transition] attribute on action methods to trigger specific transition animations. The example shows 'forward' for next and 'backward' for previous steps.

```php
<?php

use Livewire\Attributes\Transition;
use Livewire\Component;

class Wizard extends Component
{
    public $step = 1;

    #[Transition(type: 'forward')] // [tl! highlight]
    public function next()
    {
        $this->step++;
    }

    #[Transition(type: 'backward')] // [tl! highlight]
    public function previous()
    {
        $this->step--;
    }
}
```

--------------------------------

### Set cookies for tests with Livewire::withCookies()

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Use withCookies() with an array of cookie name/value pairs to set cookies for your test. The example sets a 'discountToken' cookie and asserts that the 'cart' component sees it.

```php
it('loads discount token from cookie', function () {
    Livewire::withCookies(['discountToken' => 'SUMMER2024'])
        ->test('cart')
        ->assertSet('discountToken', 'SUMMER2024');
});
```

--------------------------------

### CRUD pages with titles

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-title.md

Complete example showing titles across CRUD operations: index, create, edit, and show pages. Each page has a contextually appropriate title that improves user experience and SEO.

```php
<?php // resources/views/pages/posts/⚡index.blade.php

use Livewire\Attributes\Title;
use Livewire\Component;

new #[Title('All Posts')] class extends Component { };
```

```php
<?php // resources/views/pages/posts/⚡create.blade.php

use Livewire\Attributes\Title;
use Livewire\Component;

new #[Title('Create Post')] class extends Component { };
```

```php
<?php // resources/views/pages/posts/⚡edit.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    public function render()
    {
        return $this->view()->title("Edit: {$this->post->title}");
    }
};
```

```php
<?php // resources/views/pages/posts/⚡show.blade.php

use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public Post $post;

    public function render()
    {
        return $this->view()->title($this->post->title);
    }
};
```

--------------------------------

### Register a Livewire lifecycle hook with Livewire.hook()

Source: https://github.com/livewire/livewire/blob/4.x/docs/javascript.md

Registers a callback to execute on a given internal Livewire hook using Livewire.hook(). The example hooks into 'component.init' and receives an object with component and cleanup properties.

```js
// Register a callback to execute on a given internal Livewire hook...
Livewire.hook('component.init', ({ component, cleanup }) => {
    // ...
})
```

--------------------------------

### Dispatch and listen to Livewire events with dispatch(), dispatchTo(), and on()

Source: https://github.com/livewire/livewire/blob/4.x/docs/javascript.md

Demonstrates how to dispatch and listen for Livewire events from anywhere in your application using the global Livewire object. Use dispatch() to broadcast to all components, dispatchTo() to target a specific component by name, and on() to listen for events.

```js
// Dispatch an event to any Livewire components listening...
Livewire.dispatch('post-created', { postId: 2 })

// Dispatch an event to a given Livewire component by name...
Livewire.dispatchTo('dashboard', 'post-created', { postId: 2 })

// Listen for events dispatched from Livewire components...
Livewire.on('post-created', ({ postId }) => {
    // ...
})
```

--------------------------------

### Initialize Pest

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Initializes Pest in your project, creating a tests/Pest.php configuration file.

```shell
./vendor/bin/pest --init
```

--------------------------------

### stream() method signature change (positional parameters)

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

When using positional parameters, the order has changed. The before example shows the v3 order, and the after example shows the v4 order with the new 'el' parameter.

```php
// Before (v3) - positional parameters
$this->stream('#container', 'Hello');

// After (v4) - positional/named parameters
$this->stream('Hello', el: '#container');
```

--------------------------------

### Register class-based components programmatically

Source: https://github.com/livewire/livewire/blob/4.x/docs/components.md

Shows how to register individual class-based components, add locations, and create namespaces for class-based components using the class parameter.

```php
use Livewire\Livewire;

// In a service provider's boot() method (e.g., App\Providers\AppServiceProvider)

// Register an individual class-based component
Livewire::addComponent(
    name: 'todos',
    class: \App\Livewire\Todos::class
);

// Register a location for class-based components
Livewire::addLocation(
    classNamespace: 'App\\Admin\\Livewire'
);

// Create a namespace for class-based components
Livewire::addNamespace(
    namespace: 'admin',
    classNamespace: 'App\\Admin\\Livewire',
    classPath: app_path('Admin/Livewire'),
    classViewPath: resource_path('views/admin/livewire')
);
```

--------------------------------

### Receive props via mount() method

Source: https://github.com/livewire/livewire/blob/4.x/docs/components.md

Data passed into components is received through the mount() method. The mount() method runs when the component initializes, not on subsequent requests.

```php
<?php

use Livewire\Component;

new class extends Component {
    public $title;

    public function mount($title = null)
    {
        $this->title = $title;
    }

    // ...
};
```

--------------------------------

### Update on blur with network request using wire:model.blur.live

Source: https://github.com/livewire/livewire/blob/4.x/docs/wire-model.md

Add `.live` to `wire:model.blur` to also send a network request on blur.

```html
<input type="text" wire:model.blur.live="title">
```

--------------------------------

### Sample Livewire pagination view

Source: https://github.com/livewire/livewire/blob/4.x/docs/pagination.md

Unstyled sample of a simple Livewire pagination view. Uses $paginator->hasPages(), onFirstPage(), and onLastPage() to conditionally render Previous/Next buttons. Buttons use wire:click="previousPage" and wire:click="nextPage" to navigate pages, with wire:loading.attr="disabled" to disable during loading.

```blade
<div>
    @if ($paginator->hasPages())
        <nav role="navigation" aria-label="Pagination Navigation">
            <span>
                @if ($paginator->onFirstPage())
                    <span>Previous</span>
                @else
                    <button wire:click="previousPage" wire:loading.attr="disabled" rel="prev">Previous</button>
                @endif
            </span>

            <span>
                @if ($paginator->onLastPage())
                    <span>Next</span>
                @else
                    <button wire:click="nextPage" wire:loading.attr="disabled" rel="next">Next</button>
                @endif
            </span>
        </nav>
    @endif
</div>
```

--------------------------------

### Reference: wire:poll syntax (Blade)

Source: https://github.com/livewire/livewire/blob/4.x/docs/wire-poll.md

Reference examples of the wire:poll directive with and without an action.

```blade
wire:poll
wire:poll="action"
```

--------------------------------

### ShowPost component with like() method

Source: https://github.com/livewire/livewire/blob/4.x/docs/wire-text.md

Livewire component class that holds a Post model and a likes property. The mount() method initializes likes from the post's like_count, and like() updates the post and refreshes the likes count from the database.

```php
use Livewire\Component;
use App\Models\Post;

class ShowPost extends Component
{
    public Post $post;

    public $likes;

    public function mount()
    {
        $this->likes = $this->post->like_count;
    }

    public function like()
    {
        $this->post->like();

        $this->likes = $this->post->fresh()->like_count;
    }
}
```

--------------------------------

### Use class-based package component in Blade

Source: https://github.com/livewire/livewire/blob/4.x/docs/packages.md

Usage example for a class-based component registered under the 'mypackage' namespace.

```blade
<livewire:mypackage::counter />
```

--------------------------------

### Initialize protected property in boot() with #[Locked]

Source: https://github.com/livewire/livewire/blob/4.x/docs/lifecycle-hooks.md

Use the boot() method to initialize a protected property (e.g., an Eloquent model) on every request. The example uses the #[Locked] attribute on $postId to prevent client-side tampering. Note that protected properties are not persisted between requests, so boot() is needed to reinitialize them.

```php
<?php // resources/views/components/post/⚡show.blade.php

use Livewire\Attributes\Locked;
use Livewire\Component;
use App\Models\Post;

new class extends Component {
    #[Locked]
    public $postId = 1;

    protected Post $post;

    public function boot() // [tl! highlight:3]
    {
        $this->post = Post::find($this->postId);
    }

    // ...
};
```

--------------------------------

### Update component imports from Volt to Livewire

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Replace `Livewire\Volt\Component` with `Livewire\Component` in all component files. The before and after examples show the required changes.

```php
// Before (Volt)
use Livewire\Volt\Component;

new class extends Component { ... }

// After (Livewire v4)
use Livewire\Component;

new class extends Component { ... }
```

--------------------------------

### Alternative dynamic component syntax with <livewire:is>

Source: https://github.com/livewire/livewire/blob/4.x/docs/nesting.md

Alternative syntax for rendering a dynamic component using <livewire:is> with the :component prop. Remember to assign a unique key to each child component to avoid render skipping.

```blade
<livewire:is :component="$current" :wire:key="$current" />
```

--------------------------------

### Invalid @teleport with multiple root elements

Source: https://github.com/livewire/livewire/blob/4.x/docs/directive-teleport.md

Invalid example showing multiple root elements inside @teleport, which is not supported.

```blade
@teleport('body')
    <h2>Title</h2>
    <p>Content</p>
@endteleport
```

--------------------------------

### Implementation sketch for wire:model modifier handling

Source: https://github.com/livewire/livewire/blob/4.x/PRD-wire-model-modifiers.md

Sketch of the implementation for the 'model' directive, showing how to split modifiers at the .live boundary, build the x-model tail, set up network triggers, and handle network updates on blur, change, and enter events.

```javascript
directive('model', ({ el, directive, component, cleanup }) => {
    let { expression, modifiers } = directive

    // Split modifiers at .live boundary
    let liveIndex = modifiers.indexOf('live')
    let ephemeralModifiers = liveIndex === -1 ? modifiers : modifiers.slice(0, liveIndex)
    let networkModifiers = liveIndex === -1 ? [] : modifiers.slice(liveIndex + 1)
    let isLive = liveIndex !== -1

    // Build x-model modifier tail from ephemeral modifiers
    let xModelTail = buildModifierTail(ephemeralModifiers)

    // Build network update function with debounce/throttle
    let networkUpdate = buildNetworkUpdate(networkModifiers, component, expression, el, directive)

    // Determine network trigger events
    let networkTriggers = extractNetworkTriggers(networkModifiers)

    Alpine.bind(el, {
        ['@blur']() {
            if (networkTriggers.blur) networkUpdate()
        },
        ['@change']() {
            if (networkTriggers.change) networkUpdate()
        },
        ['@keydown.enter']() {
            if (networkTriggers.enter) networkUpdate()
        },
        ['x-model' + xModelTail]() {
            return {
                get() {
                    return dataGet(component.$wire, expression)
                },
                set(value) {
                    dataSet(component.$wire, expression, value)
                    // If live with no specific triggers, fire on every sync
                    if (isLive && networkTriggers.immediate) {
                        networkUpdate()
                    }
                },
            }
        }
    })
})
```

--------------------------------

### Trigger component method with wire:click

Source: https://github.com/livewire/livewire/blob/4.x/docs/wire-click.md

The ShowInvoice component defines a download() method that returns a file download response. The button uses wire:click="download" to trigger that method when clicked.

```php
<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Invoice;

class ShowInvoice extends Component
{
    public Invoice $invoice;

    public function download()
    {
        return response()->download(
            $this->invoice->file_path, 'invoice.pdf'
        );
    }
}
```

```html
<button type="button" wire:click="download"> <!-- [tl! highlight] -->
    Download Invoice
</button>
```

--------------------------------

### Convert component format with livewire:convert (auto-detect)

Source: https://github.com/livewire/livewire/blob/4.x/docs/components.md

Run this command to convert a component between single-file and multi-file formats. The direction is auto-detected.

```shell
php artisan livewire:convert post.create
# Single-file → Multi-file (or vice versa)
```

--------------------------------

### $intercept magic

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Intercept and modify Livewire requests from JavaScript using the $intercept magic. The example shows intercepting a 'save' action.

```blade
<script>
this.$intercept('save', ({ ... }) => {
    // ...
})
</script>
```

--------------------------------

### Mounting a component and embedding the snapshot in HTML

Source: https://github.com/livewire/livewire/blob/4.x/docs/how-livewire-works.md

The mount() method instantiates the component, generates a random id, renders its view, and builds a snapshot containing data and memo. The snapshot is embedded into the HTML via wire:id and wire:snapshot attributes, as shown in the resulting Blade output.

```php
public function mount($name)
{
    $class = Livewire::getComponentClassByName();

    $component = new $class;

    $id = str()->random(20);

    $component->setId($id);

    $data = $component->getData();

    $view = $component->render();

    $html = $view->render($data);

    $snapshot = [
        'data' => $data,
        'memo' => [
            'id' => $component->getId(),
            'name' => $component->getName(),
        ]
    ];

    return Livewire::embedSnapshotInsideHtml($html, $snapshot);
}
```

```blade
<div wire:id="123456789" wire:snapshot="{ data: { count: 0 }, memo: { 'id': '123456789', 'name': 'counter' }">
    <button wire:click="increment">Increment</button>

    <span>1</span>
</div>
```

--------------------------------

### Add middleware to Livewire update route

Source: https://github.com/livewire/livewire/blob/4.x/docs/installation.md

Adds middleware to the custom update route. The example applies the 'web' and 'auth' middleware.

```php
Livewire::setUpdateRoute(function ($handle, $path) {
    return Route::post('/custom' . $path, $handle)
        ->middleware(['web', 'auth']);
});
```

--------------------------------

### Configure Make Command Defaults

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Set the default component format and emoji usage for the make command. Set 'type' to 'class' to match v3 behavior.

```php
'make_command' => [
    'type' => 'sfc',  // Options: 'sfc', 'mfc', or 'class'
    'emoji' => true,   // Whether to use ⚡ emoji prefix
],
```

--------------------------------

### Register a component directory programmatically

Source: https://github.com/livewire/livewire/blob/4.x/docs/components.md

Registers an additional directory for Livewire to discover components from.

```php
Livewire::addLocation(
    viewPath: resource_path('views/admin/components')
);
```

--------------------------------

### Directive reference template

Source: https://github.com/livewire/livewire/blob/4.x/docs/AGENTS.md

Template for documenting wire: directives, including usage examples and a modifiers table with Alpine and Livewire-specific modifiers.

```markdown
## Reference

```blade
wire:directivename="methodName"
wire:directivename="methodName(param1, param2)"
```

### Modifiers

| Modifier | Description |
|----------|-------------|
| `.prevent` | Prevents default browser behavior |
| `.stop` | Stops event propagation |
| `.self` | Only triggers if event originated on this element |
| `.once` | Ensures listener is only called once |
| `.debounce` | Debounces handler by 250ms (use `.debounce.500ms` for custom duration) |
| `.throttle` | Throttles handler to every 250ms minimum (use `.throttle.500ms` for custom) |
| `.window` | Listens for event on the `window` object |
| `.document` | Listens for event on the `document` object |
| `.outside` | Only listens for clicks outside the element |
| `.passive` | Won't block scroll performance |
| `.capture` | Listens during the capturing phase |
| `.camel` | Converts event name to camel case |
| `.dot` | Converts event name to dot notation |
| `.renderless` | Skips re-rendering after action completes |
| `.preserve-scroll` | Maintains scroll position during updates |
| `.async` | Executes action in parallel instead of queued |
```

--------------------------------

### actingAs() for authenticated tests

Source: https://github.com/livewire/livewire/blob/4.x/docs/testing.md

Simulates a logged-in user in tests. Use the actingAs() method to avoid manually authenticating at the start of each test.

```php
use App\Models\User;
use App\Models\Post;

it('user only sees their own posts', function () {
    $user = User::factory()
        ->has(Post::factory()->count(3))
        ->create();

    $stranger = User::factory()
        ->has(Post::factory()->count(2))
        ->create();

    Livewire::actingAs($user)
        ->test('show-posts')
        ->assertViewHas('posts', function ($posts) {
            return count($posts) === 3;
        });
});
```

--------------------------------

### Initialize properties with mount() in a Livewire component

Source: https://github.com/livewire/livewire/blob/4.x/docs/lifecycle-hooks.md

Initializes the `name` and `email` properties of a `profile.edit` component using the `mount()` method, pulling values from the authenticated user via `Auth::user()`. This is the Livewire alternative to a constructor for one-time initialization.

```php
<?php // resources/views/components/profile/⚡edit.blade.php

use Illuminate\Support\Facades\Auth;
use Livewire\Component;

new class extends Component {
    public $name;

    public $email;

    public function mount()
    {
        $this->name = Auth::user()->name;

        $this->email = Auth::user()->email;
    }

    // ...
};
```

--------------------------------

### Remove Volt service provider from providers array

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Remove `App\Providers\VoltServiceProvider::class` from the providers array in `bootstrap/providers.php`. The before and after examples show the required changes.

```php
// Before
return [
    App\Providers\AppServiceProvider::class,
    App\Providers\VoltServiceProvider::class,
];

// After
return [
    App\Providers\AppServiceProvider::class,
];
```

--------------------------------

### Manual authorization deletion

Source: https://github.com/livewire/livewire/blob/4.x/docs/security.md

This example shows how to manually authorize the deletion of a post using the authorize method. If the user does not own the post, an AuthorizationException is thrown.

```php
<?php

use App\Models\Post;
use Livewire\Component;

class ShowPost extends Component
{
    public $postId;

    public function mount($postId)
    {
        $this->postId = $postId;
    }

    public function delete()
    {
        $post = Post::find($this->postId);

        $this->authorize('delete', $post); // [tl! highlight]

        $post->delete();
    }
}
```

```html
<button wire:click="delete">Delete Post</button>
```

--------------------------------

### Property-specific updated hook (updatedUsername)

Source: https://github.com/livewire/livewire/blob/4.x/docs/lifecycle-hooks.md

Rewrites the previous `updated` example using the property-specific method `updatedUsername()`, which runs only when the `$username` property is updated.

```php
<?php // resources/views/components/user/⚡create.blade.php

use Livewire\Component;

new class extends Component {
    public $username = '';

    public $email = '';

    public function updatedUsername()
    {
        $this->username = strtolower($this->username);
    }

    // ...
};

```

--------------------------------

### Basic #[Lazy] component with slow mount query

Source: https://github.com/livewire/livewire/blob/4.x/docs/attribute-lazy.md

Apply #[Lazy] to a component to defer its loading until it enters the viewport. The component initially renders as an empty <div></div> and loads when scrolled into view.

```php
<?php // resources/views/components/⚡revenue.blade.php

use Livewire\Attributes\Lazy;
use Livewire\Component;
use App\Models\Transaction;

new #[Lazy] class extends Component { // [tl! highlight]
    public $amount;

    public function mount()
    {
        // Slow database query...
        $this->amount = Transaction::monthToDate()->sum('amount');
    }
};
?>

<div>
    Revenue this month: {{ $amount }}
</div>
```

--------------------------------

### Valid @teleport with single root element

Source: https://github.com/livewire/livewire/blob/4.x/docs/directive-teleport.md

Valid example showing a single root element inside @teleport, which is required for teleporting to work.

```blade
@teleport('body')
    <div>
        <h2>Title</h2>
        <p>Content</p>
    </div>
@endteleport
```

--------------------------------

### Configure Component Namespaces

Source: https://github.com/livewire/livewire/blob/4.x/docs/upgrading.md

Create custom namespaces for organizing view-based components, such as 'layouts' and 'pages'.

```php
'component_namespaces' => [
    'layouts' => resource_path('views/layouts'),
    'pages' => resource_path('views/pages'),
],
```
Tokens:
Raw