Livewire

https://livewire.laravel.com/docs/4.x
Admin
Livewire is a full-stack framework for Laravel that allows developers to build dynamic, reactive...
Tokens:251,373
Snippets:2,130
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install Livewire with Composer

Source: https://livewire.laravel.com/docs/4.x/installation

Run this command in your Laravel application directory to install Livewire. Requires Laravel 10 or later and PHP 8.1 or later. Livewire uses Laravel's package auto-discovery, so no additional setup is required.

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

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

### Set up Alpine and link packages to Livewire

Source: https://livewire.laravel.com/docs/4.x/contribution-guide

Sets up the Alpine repository locally by forking and cloning it, installing npm dependencies, building all Alpine packages, linking them locally, and then linking them into the Livewire project. Requires NPM to be installed. Run these commands after setting up Livewire.

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

# 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
```

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

### Start Laravel development server

Source: https://livewire.laravel.com/docs/4.x/quickstart

Run this command to start the Laravel development server, typically on http://localhost:8000. Use this to test the Livewire component.

```shell
php artisan serve
```

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

### Example URL with search query parameter

Source: https://livewire.laravel.com/docs/4.x/url

Example URL showing the search value stored in the query string after typing 'bob' into the search field.

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

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

### Middleware arguments not supported - good example

Source: https://livewire.laravel.com/docs/4.x/security

Shows the correct way to add persistent middleware without arguments.

```php
// Good...
Livewire::addPersistentMiddleware(AuthorizeResource::class);
```

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

### Unit test example

Source: https://livewire.laravel.com/docs/4.x/contribution-guide

Example of a unit test class for Livewire, extending Tests\TestCase and using PHPUnit. Place unit tests in UnitTest.php.

```php
use Tests\TestCase;

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

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

### Browser test example

Source: https://livewire.laravel.com/docs/4.x/contribution-guide

Example of a browser test class for Livewire, extending Tests\BrowserTestCase and using Laravel Dusk. Place browser tests in BrowserTest.php.

```php
use Tests\BrowserTestCase;

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

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

### Install Pest browser plugin

Source: https://livewire.laravel.com/docs/4.x/testing

Install the Pest browser plugin via Composer as a dev dependency.

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

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

### Middleware arguments not supported - bad example

Source: https://livewire.laravel.com/docs/4.x/security

Shows an unsupported usage of middleware arguments in addPersistentMiddleware. Livewire does not support arguments for persistent middleware.

```php
// Bad...
Livewire::addPersistentMiddleware(AuthorizeResource::class.':admin');
```

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

### Example cursor URL

Source: https://livewire.laravel.com/docs/4.x/pagination

Shows the format of a URL with an encoded cursor when using cursorPaginate().

```text
https://example.com/posts?cursor=eyJpZCI6MTUsIl9wb2ludHNUb05leHRJdGVtcyI6dHJ1ZX0
```

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

### Configure additional component locations in config/livewire.php

Source: https://livewire.laravel.com/docs/4.x/components

Configure additional directories for Livewire to automatically discover components. The default directory is resources/views/components; this example adds admin and widgets directories.

```php
'component_locations' => [
    resource_path('views/components'),
    resource_path('views/admin/components'),
    resource_path('views/widgets'),
],
```

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

### Example URL with default paginator

Source: https://livewire.laravel.com/docs/4.x/pagination

Shows the URL format when using the default paginator without a pageName. The page number is stored in the 'page' query parameter.

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

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

### Fork and clone Livewire repository

Source: https://livewire.laravel.com/docs/4.x/contribution-guide

Sets up the Livewire repository locally by forking and cloning it with the GitHub CLI, installing Composer dependencies, and configuring Dusk. Run these commands in order before making changes or running the test suite.

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

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

### Set up wire:navigate with Livewire routes and navigation links

Source: https://livewire.laravel.com/docs/4.x/navigate

Define three Livewire routes in routes/web.php and add wire:navigate to each navigation link. When a link is clicked, Livewire intercepts the request, fetches the new page in the background, and swaps the URL, title, and body without a full reload.

```php
use App\Livewire\Dashboard;
use App\Livewire\ShowPosts;
use App\Livewire\ShowUsers;

Route::livewire('/', 'pages::dashboard');

Route::livewire('/posts', 'pages::show-posts');

Route::livewire('/users', 'pages::show-users');
```

```blade
<nav>
    <a href="/" wire:navigate>Dashboard</a>
    <a href="/posts" wire:navigate>Posts</a>
    <a href="/users" wire:navigate>Users</a>
</nav>
```

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

### Install Pest

Source: https://livewire.laravel.com/docs/4.x/testing

Remove PHPUnit and install Pest with all dependencies. Run these commands in your Laravel application root.

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

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

### Install Playwright via npm

Source: https://livewire.laravel.com/docs/4.x/testing

Install Playwright and its browsers using npm. This is required for Pest browser testing.

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

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

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

Source: https://livewire.laravel.com/docs/4.x/upgrading

Shows the v3 and v4 signatures for setUpdateRoute. In v4, use the $path parameter to preserve the hash-based endpoint.

```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);
});
```

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

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

Source: https://livewire.laravel.com/docs/4.x/synthesizers

Implements a synthesizer for an Address DTO that supports wire:model binding by adding get() and set() methods. The dehydrate() method serializes the object to an array, and hydrate() reconstructs it. The get() and set() methods directly access and modify the target property.

```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;
    }
}
```

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

### Import Livewire and Alpine in app.js

Source: https://livewire.laravel.com/docs/4.x/alpine

Import Livewire and Alpine in your app.js and call Livewire.start() to initialize them manually.

```js
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';

// Register any Alpine directives, components, or plugins here...

Livewire.start()
```

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

### Download using Storage facade

Source: https://livewire.laravel.com/docs/4.x/downloads

Use the Storage facade to initiate a download from a specific disk. The download() method returns Storage::disk('invoices')->download('invoice.csv').

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

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

### Sample Simple Livewire Pagination View

Source: https://livewire.laravel.com/docs/4.x/pagination

An unstyled sample of a simple Livewire pagination view. It uses Livewire's page navigation helpers like $this->nextPage() directly inside the template by adding wire:click="nextPage" to buttons. Includes wire:loading.attr="disabled" to disable buttons 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>
```

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

### Pull specific form properties with $this->pull()

Source: https://livewire.laravel.com/docs/4.x/forms

Shows pulling specific properties with pull(). Pass a single property name to get its value, or an array to get a key-value array of properties, before resetting them.

```php
// Return a value before resetting...
$this->pull('title');

 // Return a key-value array of properties before resetting...
$this->pull(['title', 'content']);
```

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

### CSP Headers Example for Livewire CSP-safe Build

Source: https://livewire.laravel.com/docs/4.x/csp

Example Content-Security-Policy header that works with Livewire's CSP-safe build. Remove 'unsafe-eval' from script-src, use nonce-based script loading, and consider adding 'strict-dynamic' for better compatibility.

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

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

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

Source: https://livewire.laravel.com/docs/4.x/testing

Use Livewire::visit() instead of Livewire::test() to test the component in a real browser. This example types into fields, presses a button, and asserts a success message. Browser tests are slower but provide end-to-end confidence.

```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');
});
```

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

### Install Livewire v4

Source: https://livewire.laravel.com/docs/4.x/upgrading

Updates the Livewire dependency to version 4.0 or higher in your composer.json.

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

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

### Initialize Pest

Source: https://livewire.laravel.com/docs/4.x/testing

Initialize Pest in your project. This creates a tests/Pest.php configuration file.

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

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

### PHP pseudo-code to hydrate a component from snapshot

Source: https://livewire.laravel.com/docs/4.x/hydration

Shows how Livewire creates a new component instance and seeds its properties from the snapshot state.

```php
$state = request('snapshot.state');
$memo = request('snapshot.memo');

$instance = Livewire::new($memo['name'], $memo['id']);

foreach ($state as $property => $value) {
    $instance[$property] = $value;
}
```

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

### Create a Livewire component with Artisan command

Source: https://livewire.laravel.com/docs/4.x/quickstart

Run this command to generate a new Livewire component. The `pages::` prefix organizes it in the pages directory, and it creates a single-file component at `resources/views/pages/post/⚡create.blade.php`.

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

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

### $intercept magic

Source: https://livewire.laravel.com/docs/4.x/upgrading

Use the $intercept magic to intercept and modify Livewire requests from JavaScript. The example intercepts the 'save' action.

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

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

### Todos component with a Stringable in the collection

Source: https://livewire.laravel.com/docs/4.x/hydration

Example component with a Laravel Stringable as the third item, demonstrating deeply nested tuples.

```php
<?php

use Livewire\Component;

new class extends Component {
    public $todos;

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

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

### Production-ready save method with database persistence

Source: https://livewire.laravel.com/docs/4.x/quickstart

In a real application, replace the `save()` method to validate, create a Post record, and redirect to `/posts`. Assumes a `Post` model and database table exist.

```php
public function save()
{
    $validated = $this->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);

    Post::create($validated); // Assumes you have a Post model and database table

    return $this->redirect('/posts');
}
```

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

### Invalid @teleport with multiple root elements

Source: https://livewire.laravel.com/docs/4.x/directive-teleport

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

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

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

### Initialize component properties with Livewire::test() second parameter

Source: https://livewire.laravel.com/docs/4.x/testing

Pass initial data to a component as the second parameter of Livewire::test() to simulate receiving data from parent components or route parameters.

```php
use App\Models\Post;

it('title field is populated when editing', function () {
    $post = Post::factory()->create([
        'title' => 'Existing post title',
    ]);

    Livewire::test('post.edit', ['post' => $post])
        ->assertSet('title', 'Existing post title');
});
```

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

### Valid @teleport with single root element

Source: https://livewire.laravel.com/docs/4.x/directive-teleport

Valid example showing a single root element inside @teleport, which is required.

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

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

### Pass parameters to action with call()

Source: https://livewire.laravel.com/docs/4.x/testing

Pass parameters to an action by providing them as arguments to `call()`. This example calls 'deletePost' with a `$postId` variable.

```php
Livewire::test('post.show')
    ->call('deletePost', $postId);
```

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

### Initialize protected property in boot() method

Source: https://livewire.laravel.com/docs/4.x/lifecycle-hooks

Use the boot() method to initialize a protected property on every request. The example initializes a protected Post model from a locked public $postId. The #[Locked] attribute prevents tampering with $postId.

```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);
    }

    // ...
};
```

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

### Dynamic prop syntax with PHP expression

Source: https://livewire.laravel.com/docs/4.x/nesting

Example of passing a PHP expression to a child component using the colon-prefixed attribute syntax.

```blade
<livewire:todo-count :todos="$todos" />
```

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

### Livewire.hook('component.init')

Source: https://livewire.laravel.com/docs/4.x/javascript

Registers a callback for the 'component.init' event, triggered when a new Livewire component is discovered.

```APIDOC
## Livewire.hook('component.init')

### Description
Registers a callback that runs when a new Livewire component is discovered, either on initial page load or later. Useful for intercepting or initializing anything related to the new component.

### Method
hook

### Parameters
- **event** (string) - Required - The event name: `'component.init'`
- **callback** (function) - Required - Receives an object with `component` and `cleanup` properties.

### Example
```js
Livewire.hook('component.init', ({ component, cleanup }) => {
    //
})
```
```

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

### Set pagination_theme to bootstrap in config/livewire.php

Source: https://livewire.laravel.com/docs/4.x/pagination

Configure Livewire to use Bootstrap-styled pagination views by setting 'pagination_theme' to 'bootstrap'. Requires publishing the config file first.

```php
'pagination_theme' => 'bootstrap',
```

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

### Counter component for $wire reference

Source: https://livewire.laravel.com/docs/4.x/javascript

A basic Livewire component with a public property and an increment method. Used as the reference example for the $wire object.

```php
<?php

namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 1;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}
```

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

### Assert event dispatched with parameters

Source: https://livewire.laravel.com/docs/4.x/testing

Assert events were dispatched with specific parameters. This example checks that the 'notify' event is dispatched with a 'message' parameter.

```php
it('dispatches notification when deleting post', function () {
    Livewire::test('post.show')
        ->call('delete', postId: 3)
        ->assertDispatched('notify', message: 'Post deleted');
});
```

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

### Assert redirect with assertRedirect()

Source: https://livewire.laravel.com/docs/4.x/testing

Assert that an action performed a redirect using `assertRedirect()`. This example checks that saving a new post redirects to '/posts'.

```php
it('redirects to posts index after creating', function () {
    Livewire::test('post.create')
        ->set('title', 'New post')
        ->set('content', 'Content here')
        ->call('save')
        ->assertRedirect('/posts');
});
```

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

### Immediate sync with $wire.entangle().live

Source: https://livewire.laravel.com/docs/4.x/alpine

Add .live to $wire.entangle() to sync changes immediately instead of deferring until the next Livewire request.

```blade
<div x-data="{ open: $wire.entangle('showDropdown').live }">
```

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

### Trigger component method with wire:click

Source: https://livewire.laravel.com/docs/4.x/wire-click

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

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

### Configure temporary upload directory

Source: https://livewire.laravel.com/docs/4.x/uploads

Customize the directory where temporary files are stored on the specified disk. The default is 'livewire-tmp/'; this example changes it to 'tmp'.

```php
'temporary_file_upload' => [
    // ...
    'directory' => 'tmp',
],
```

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

### Live search with #[Reactive] parent and child components

Source: https://livewire.laravel.com/docs/4.x/attribute-reactive

A practical live search example: the parent component passes the computed $posts to a child component that uses #[Reactive] to automatically update as the user types. The two files are required together for the reactive search results to work.

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

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

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

### Combine .once, .half, and .margin.100px

Source: https://livewire.laravel.com/docs/4.x/wire-intersect

Combine multiple modifiers to create precise behaviors. This example loads when half visible, only once, with a 100px margin.

```blade
<!-- Load when half visible, only once, with 100px margin -->
<div wire:intersect.once.half.margin.100px="loadSection">
    <!-- ... -->
</div>
```

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

### Initialize properties in mount() method

Source: https://livewire.laravel.com/docs/4.x/properties

Defines public properties and sets initial values in the mount() method. The highlighted line assigns a default list of todos to the $todos property, which are shown on first render.

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

use Livewire\Component;

new class extends Component {
    public $todos = [];

    public $todo = '';

    public function mount()
    {
        $this->todos = ['Buy groceries', 'Walk the dog', 'Write code']; // [tl! highlight]
    }

    // ...
};
```

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

### Refresh island with $wire.$island().$refresh()

Source: https://livewire.laravel.com/docs/4.x/islands

Any `$wire` method works with `$island()`, including `$refresh()`, `$set()`, and `$toggle()`. This example uses `$refresh()`.

```blade
<button type="button" x-on:click="$wire.$island('revenue').$refresh()">
    Refresh revenue
</button>
```

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

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

Source: https://livewire.laravel.com/docs/4.x/lifecycle-hooks

Initializes the `name` and `email` properties of a `profile.edit` component using the `mount()` method. Uses `Auth::user()` to fetch the current user's data. The `mount()` method is called once when the component is first created, unlike `__construct()` which would run on every network request.

```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;
    }

    // ...
};
```

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

### PHP code to re-create a collection from snapshot tuple

Source: https://livewire.laravel.com/docs/4.x/hydration

Shows how Livewire uses the metadata to instantiate the correct collection class.

```php
[ $state, $metadata ] = request('snapshot.state.todos');

$collection = new $metadata['class']($state);
```

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

### Todos component with a Laravel collection property

Source: https://livewire.laravel.com/docs/4.x/hydration

Example component that sets a public property to a Laravel collection, demonstrating a non-primitive property type.

```php
<?php

use Livewire\Component;

new class extends Component {
    public $todos;

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

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

### Create and convert Livewire components

Source: https://livewire.laravel.com/docs/4.x/upgrading

Commands to create a Livewire component in single-file (default) or multi-file format, and to convert between formats. The single-file command is the default; the --mfc flag creates a multi-file component.

```bash
php artisan make:livewire create-post        # Single-file (default)
php artisan make:livewire create-post --mfc  # Multi-file
php artisan livewire:convert create-post     # Convert between formats
```

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

### Assert validation errors with assertHasErrors()

Source: https://livewire.laravel.com/docs/4.x/testing

Assert that validation errors have been thrown using `assertHasErrors()`. This example checks that an empty title triggers a validation error.

```php
it('title field is required', function () {
    Livewire::test('post.create')
        ->set('title', '')
        ->call('save')
        ->assertHasErrors('title');
});
```

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

### Define a broadcastable OrderShipped event

Source: https://livewire.laravel.com/docs/4.x/events

Defines a broadcastable event named 'OrderShipped' that broadcasts on the 'orders' channel. This event is used in the Echo listening examples.

```php
<?php

namespace App\Events;

use App\Models\Order;
use Illuminate\Broadcasting\Channel;
use Illuminate\Broadcasting\InteractsWithSockets;
use Illuminate\Contracts\Broadcasting\ShouldBroadcast;
use Illuminate\Foundation\Events\Dispatchable;
use Illuminate\Queue\SerializesModels;

class OrderShipped implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    public Order $order;

    public function broadcastOn()
    {
        return new Channel('orders');
    }
}
```

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

### Create component with namespace using make:livewire

Source: https://livewire.laravel.com/docs/4.x/components

Create a Livewire component using a custom namespace. The namespace 'admin' must be defined in the component_namespaces configuration.

```shell
php artisan make:livewire admin::users-table
```

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

### Forward event parameters to parent method

Source: https://livewire.laravel.com/docs/4.x/events

Forward event parameters to the parent method using $event.detail. The example passes postId to the close() method.

```blade
<livewire:edit-post @saved="close($event.detail.postId)">
```

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

### Array validation with #[Validate]

Source: https://livewire.laravel.com/docs/4.x/attribute-validate

Validates an array property and its children using #[Validate] with wildcard rules. The example is an anonymous Livewire component in a Blade file.

```php
<?php // resources/views/components/⚡task-list.blade.php

use Livewire\Attributes\Validate;
use Livewire\Component;

new class extends Component {
    #[Validate([
        'tasks' => 'required|array|min:1',
        'tasks.*' => 'required|string|min:3',
    ])]
    public $tasks = [];

    public function addTask()
    {
        $this->tasks[] = '';
    }
};
```

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

### Register component directory with Livewire::addLocation

Source: https://livewire.laravel.com/docs/4.x/components

Register a directory for Livewire to discover components programmatically. Use in a service provider's boot() method.

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

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

### Island targeting from JavaScript

Source: https://livewire.laravel.com/docs/4.x/upgrading

Trigger island renders directly from the template using wire:island.append. The example appends the result of the 'loadMore' action to the 'stats' island.

```blade
<button wire:click="loadMore" wire:island.append="stats">
    Load more
</button>
```

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

### Render a sub-directory component with <livewire:post.create />

Source: https://livewire.laravel.com/docs/4.x/components

Use dot notation to reference a component located in a sub-directory, such as resources/views/components/post/⚡create.blade.php.

```blade
<livewire:post.create />
```
Tokens:
Raw