### Setup Livewire Locally

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

This snippet demonstrates how to set up the Livewire project locally for contribution. It involves forking the repository, cloning it, installing Composer dependencies, and configuring Dusk.

```Bash
# Fork and clone Livewire
gh repo fork livewire/livewire --default-branch-only --clone=true --remote=false -- 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
```

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

### Setup Alpine.js Locally and Link Packages

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

This snippet details the process of setting up Alpine.js locally, including forking, cloning, installing npm dependencies, building packages, and linking them. It concludes by linking Alpine.js packages to the Livewire project and building 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
```

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

### Livewire Test Setup: Instantiate Component

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

Demonstrates how to instantiate and test a specific Livewire component using `Livewire::test()`. This is the starting point for most component tests.

```PHP
Livewire::test(CreatePost::class)
```

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

### Browser Test Example for Livewire

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

An example of a basic browser test for Livewire, showing how to set up a test class that extends BrowserTestCase and includes a test method for browser interactions.

```php
use Tests\BrowserTestCase;

class BrowserTest extends BrowserTestCase
{
    /** @test */
    public function livewire_can_run_action()
    {
        // ...
    }
}
```

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

### Install Livewire with Composer

Source: https://livewire.laravel.com/docs/index

This command installs the Livewire package into your Laravel project using Composer. Ensure you have Composer installed and are in your Laravel project's root directory.

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

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

### PHP Unit Test Example for Livewire

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

An example of a basic PHP unit test for Livewire, demonstrating how to set up a test class that extends TestCase and includes a test method.

```php
use Tests\TestCase;

class UnitTest extends TestCase
{
    /** @test */
    public function livewire_can_run_action(): void
    {
       // ...
    }
}
```

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

### Basic Livewire Navigation Setup (PHP)

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

This snippet shows the basic setup in a Laravel routes file to define Livewire components as routes. These routes can then be targeted by `wire:navigate`.

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

Route::get('/', Dashboard::class);

Route::get('/posts', ShowPosts::class);

Route::get('/users', ShowUsers::class);
```

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

### Livewire Test Setup: Instantiate Component with Mount Parameters

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

Shows how to test a Livewire component and pass initial parameters to its `mount()` method.

```PHP
Livewire::test(UpdatePost::class, ['post' => $post])
```

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

### Install Livewire with Composer

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

This command installs the Livewire package into your Laravel application using Composer. Ensure you have a Laravel application set up and are in its root directory in your terminal.

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

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

### Install Volt Service Provider (Artisan)

Source: https://livewire.laravel.com/docs/volt

After installing the Volt package, this Artisan command registers Volt's service provider. This enables Volt to find and process your single-file components.

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

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

### Define Route for Livewire Page Component (PHP)

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

This example shows how to define a route that renders a Livewire component as a full page, a common pattern in Livewire applications.

```PHP
Route::get('/posts', ShowPosts::class);
```

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

### Manually Bundle Livewire and Alpine.js (JavaScript)

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

This JavaScript snippet illustrates how to import and start Livewire and Alpine.js manually after disabling automatic script injection. It includes an example of registering an Alpine.js plugin.

```JavaScript
// Warning: This snippet demonstrates what NOT to do...
 
import Alpine from 'alpinejs'
import Clipboard from '@ryangjchandler/alpine-clipboard'
 
Alpine.plugin(Clipboard)
Alpine.start()
```

```JavaScript
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'
 
Alpine.plugin(Clipboard)
 
Livewire.start()
```

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

### Install Volt Package (Composer)

Source: https://livewire.laravel.com/docs/volt

This command installs the Livewire Volt package into your Laravel project using Composer. It's the first step to integrating Volt's features.

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

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

### Livewire Specific Child Component Example

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

This PHP code defines a basic Livewire component 'StepOne' which is intended to be rendered dynamically. It serves as an example of a child component that can be displayed based on runtime conditions.

```php
<?php

namespace App\Livewire;

use Livewire\Component;

class StepOne extends Component
{
    public function render()
    {
        return view('livewire.step-one');
    }
}
```

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

### Livewire Blade Template Example

Source: https://livewire.laravel.com/docs/morphing

A basic Livewire Blade template for a `CreatePost` component, demonstrating input fields, error display, and a submit button.

```html
<form wire:submit="save">
    <div>
        <input wire:model="title">
    </div>

    @if ($errors->has('title'))
        <div>{{ $errors->first('title') }}</div>
    @endif

    <div>
        <button>Save</button>
    </div>
</form>
```

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

### Livewire Navigation Progress Bar Configuration

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

Provides an example of how to configure the progress bar's visibility and color in Livewire's configuration file (`config/livewire.php`).

```php
'navigate' => [
    'show_progress_bar' => false,
    'progress_bar_color' => '#2299dd',
],
```

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

### Livewire Volt: Render Component with Tag Syntax

Source: https://livewire.laravel.com/docs/volt

Example of rendering a Volt component using Livewire's standard tag syntax, including passing properties.

```Blade
<livewire:user-index :users="$users" />
```

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

### Livewire UpdatePost Component Example

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

An example of a Livewire component that fetches and updates a 'Post' model. It includes validation using Livewire's #[Validate] attribute and demonstrates the mount and update methods.

```php
<?php

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

class UpdatePost extends Component
{
    public Post $post;

    #[Validate('required|min:5')]
    public $title = '';

    public $content = '';

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

    public function update()
    {
        $this->post->update([
            'title' => $this->title,
            'content' => $this->content,
        ]);
    }
}
```

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

### Laravel Route Definition for Full-Page Component

Source: https://livewire.laravel.com/docs/redirecting

Example of configuring a Livewire component to act as a full-page component for a given route.

```PHP
use App\Livewire\ShowPosts;

Route::get('/posts', ShowPosts::class);
```

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

### Eloquent Model Binding Example (Livewire 2)

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

This code snippet demonstrates the Eloquent model binding pattern supported in Livewire 2, where `wire:model` could directly bind to model properties.

```PHP
public Post $post;

protected $rules = [
    'post.title' => 'required',
    'post.description' => 'required',
];
```

```Blade
<input wire:model="post.title">
<input wire:model="post.description">
```

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

### Generate Livewire Component

Source: https://livewire.laravel.com/docs/index

This Artisan command generates the necessary PHP and Blade files for a new Livewire component. Replace 'counter' with your desired component name.

```bash
php artisan make:livewire counter
```

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

### Manually Navigate to a New URL with Livewire

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

Provides an example of how to manually trigger a page visit to a new URL using the Livewire.navigate() JavaScript method.

```javascript
Livewire.navigate('/new/url')
```

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

### Livewire Volt: Define Mount Lifecycle Hook

Source: https://livewire.laravel.com/docs/volt

Example of using the `mount` function to define the component's mount lifecycle hook, injecting parameters and resolving dependencies.

```PHP
use App\Services\UserCounter;
use function Livewire\Volt\mount;

mount(function (UserCounter $counter, $users) {
    $counter->store('userCount', count($users));

    // ...
});
```

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

### Create a New Git Branch

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

This command demonstrates how to create a new branch in Git for feature development or bug fixes, ensuring changes are isolated.

```bash
git checkout -b my-feature
```

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

### Livewire Volt: Define Initial State Property

Source: https://livewire.laravel.com/docs/volt

Example of defining an initial state property with a default value using the `state` function.

```PHP
<?php

use function Livewire\Volt\state;

state(['count' => 0]);

?>

<div>
    {{ $count }}
</div>
```

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

### Livewire Component Example (PHP)

Source: https://livewire.laravel.com/docs/morphing

A basic Livewire component demonstrating state management and actions. It includes a public property for input and an array to store items, with a method to add new items.

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

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

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

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

### Dispatching and Listening for Events in Livewire 3

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

Demonstrates how to dispatch and listen for events in Livewire 3 using the unified `dispatch` method. This replaces the older `emit` and `dispatchBrowserEvent` methods.

```PHP
class CreatePost extends Component
{
    public Post $post;

    public function save()
    {
        $this->dispatch('post-created', postId: $this->post->id);
    }
}

class Dashboard extends Component
{
    #[On('post-created')]
    public function postAdded($postId)
    {
        //
    }
}
```

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

### Livewire Test Setup: Set Query Parameters

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

Configures URL query parameters for the test, simulating how a component might receive data via the URL using Livewire's `#[Url]` attribute.

```PHP
Livewire::withQueryParams(['search' => '...'])
```

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

### Livewire Component for Entangled State

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

A PHP example of a Livewire component demonstrating state management for dropdown visibility using a public property that can be entangled with Alpine.js.

```php
use Livewire\Component;

class PostDropdown extends Component
{
    public $showDropdown = false;

    public function archive()
    {
        // ...

        $this->showDropdown = false;
    }

    public function delete()
    {
        // ...

        $this->showDropdown = false;
    }
}

```

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

### Livewire Project Structure for Tests

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

This snippet shows the directory structure within the Livewire project where tests can be added, categorized by Livewire features.

```text
src/Features/SupportAccessingParent
src/Features/SupportAttributes
src/Features/SupportAutoInjectedAssets
src/Features/SupportBladeAttributes
src/Features/SupportChecksumErrorDebugging
src/Features/SupportComputed
src/Features/SupportConsoleCommands
src/Features/SupportDataBinding
//...
```

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

### Dispatch Livewire Events (PHP & JavaScript)

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

Demonstrates dispatching custom events from a Livewire component, which can be listened to by other Livewire components or JavaScript. Includes examples with and without parameters.

```php
use Livewire\Component;

class MyComponent extends Component
{
    public $postId = 1;

    public function render()
    {
        return view('livewire.my-component');
    }

    public function dispatchPostCreatedEvent()
    {
        $this->dispatch('post-created');
    }

    public function dispatchPostCreatedWithIdEvent()
    {
        $this->dispatch('post-created', postId: $this->postId);
    }
}

// In JavaScript (e.g., Alpine.js):
// document.addEventListener('livewire:init', () => {
//     Livewire.on('post-created', (event) => {
//         console.log('Post created event received:', event.detail);
//     });
// });
```

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

### Default Livewire Layout Structure

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

This is an example of the default `app.blade.php` layout file generated by Livewire. It includes basic HTML structure and a `{{ $slot }}` placeholder for component content.

```Blade
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>
```

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

### PHP Livewire Counter Component

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

Example of a basic Livewire component in PHP that increments a counter. It demonstrates the `render` method for returning Blade views and a public method for handling user interactions.

```PHP
class Counter extends Component
{
    public $count = 1;

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

    public function render()
    {
        return <<<'HTML'
        <div>
            Count: {{ $count }}

            <button wire:click="increment">+</button>
        </div>
        HTML;
    }
}
```

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

### Livewire 3 New Configuration Options

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

These are new configuration keys introduced in Livewire version 3. They control features like legacy model binding, asset injection, and pagination themes.

```php
'legacy_model_binding' => false,

'inject_assets' => true,

'inject_morph_markers' => true,

'navigate' => false,

'pagination_theme' => 'tailwind',
```

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

### Livewire Parent Component (Posts)

Source: https://livewire.laravel.com/docs/understanding-nesting

Example of a parent Livewire component that fetches and displays a list of posts, allowing for dynamic updates to the post limit. It renders nested 'show-post' components for each post.

```PHP
<?php

namespace App\Livewire;

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

class Posts extends Component
{
    public $postLimit = 2;

    public function render()
    {
        return view('livewire.posts', [
            'posts' => Auth::user()->posts()
                ->limit($this->postLimit)->get(),
        ]);
    }
}
```

```HTML
<div>
    Post Limit: <input type="number" wire:model.live="postLimit">

    @foreach ($posts as $post)
        <livewire:show-post :$post :key="$post->id">
    @endforeach
</div>
```

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

### Layout with Persisted Audio Player

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

An example of a main layout file (`app.blade.php`) that includes a persisted audio player using the @persist directive, ensuring playback continuity during navigation.

```html
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>{{ $title ?? 'Page Title' }}</title>
    </head>
    <body>
        <main>
            {{ $slot }}
        </main>

        @persist('player') 
            <audio src="{{ $episode->file }}" controls></audio>
        @endpersist
    </body>
</html>
```

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

### Remove wire:click.prefetch

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

The `wire:click.prefetch` directive has been removed in Livewire 3. This change affects how Livewire handles click events for performance optimization. The provided example shows the removal of the `.prefetch` modifier.

```html
<button wire:click="...">
```

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

### Livewire File Download using Storage Facade

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

An example of initiating a file download within a Livewire component using the Laravel Storage facade. This method allows downloads from configured storage disks.

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

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

### Target Action with Specific Parameters

Source: https://livewire.laravel.com/docs/wire-loading

This example illustrates targeting a loading indicator for a specific action ('remove') with its parameters, ensuring the indicator only appears when that exact action and parameter combination is called.

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

            <button wire:click="remove({{ $post->id }})">Remove</button>

            <div wire:loading wire:target="remove({{ $post->id }})">
                Removing post...
            </div>
        </div>
    @endforeach
</div>
```

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

### Tracking Asset Changes with data-navigate-track

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

Shows how to use `data-navigate-track` to trigger a full page reload when a script's query string changes, ensuring users get fresh assets after deployments.

```html
<!-- Page one -->
<head>
    <script src="/app.js?id=123" data-navigate-track></script>
</head>
 
<!-- Page two -->
<head>
    <script src="/app.js?id=456" data-navigate-track></script>
</head>
```

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

### Initialize Livewire Component Properties

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

Demonstrates how to initialize component properties, such as fetching user todos, within the mount() method of a Livewire component.

```PHP
<?php
 
namespace App\Livewire;
 
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
 
class TodoList extends Component
{
    public $todos = [];
 
    public $todo = '';
 
    public function mount()
    {
        $this->todos = Auth::user()->todos; 
    }
 
    // ...
}
```

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

### Import Livewire and Alpine in JavaScript

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

This JavaScript snippet demonstrates how to import Livewire and Alpine from the vendor directory into your `app.js` file. After importing, you can register custom Alpine components, stores, or plugins before starting Livewire.

```javascript
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
 
// Register any Alpine directives, components, or plugins here...
 
Livewire.start()
```

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

### Publish Livewire Configuration (Bash)

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

Provides the Artisan command to publish Livewire's configuration file to the application's `/config` directory. This is a prerequisite for customizing the pagination theme.

```Bash
php artisan livewire:publish --config
```

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

### Livewire Component Basic Search

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

A basic Livewire component that filters users based on a search input. It uses `wire:model.live` to update the search property and display filtered results. This example demonstrates the initial setup before URL synchronization.

```PHP
<?php

namespace App\Livewire;

use Livewire\Attributes\Url;
use Livewire\Component;
use App\Models\User;

class ShowUsers extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.show-users', [
            'users' => User::search($this->search)->get(),
        ]);
    }
}
```

```HTML
<div>
    <input type="text" wire:model.live="search">

    <ul>
        @foreach ($users as $user)
            <li wire:key="{{ $user->id }}">{{ $user->name }}</li>
        @endforeach
    </ul>
</div>
```

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

### Import Livewire ESM Module and Access Alpine

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

Shows how to import the Livewire core ESM module into a bundle and access `Alpine` from it, after configuring Livewire for manual bundling. `Alpine.start()` is no longer needed as Livewire handles it.

```javascript
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import customPlugin from './plugins/custom-plugin'

Alpine.plugin(customPlugin)

Livewire.start()
```

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

### Configure Livewire Update Route with Locale Prefix

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

Livewire 3 no longer automatically preserves locale prefixes in the URI for component updates. To maintain this behavior, you must explicitly define the update route using `Livewire::setUpdateRoute()`. This example shows how to configure the update route within a route group that includes a locale prefix.

```php
Route::group(['prefix' => LaravelLocalization::setLocale()], function () {
    Livewire::setUpdateRoute(function ($handle) {
        return Route::post('/livewire/update', $handle);
    });
});
```

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

### Livewire 3 Event Dispatching Syntax Migrations

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

Provides a comparison of Livewire 2 event dispatching syntax with the new Livewire 3 syntax, highlighting the changes from `emit` and `dispatchBrowserEvent` to `dispatch`, `dispatchTo`, and `dispatchSelf`.

```PHP
-"$this->emit('post-created'); 
+"$this->dispatch('post-created'); 
 
-"$this->emitTo('foo', 'post-created'); 
+"$this->dispatch('post-created')->to('foo'); 
 
-"$this->emitSelf('post-created'); 
+"$this->dispatch('post-created')->self(); 
 
-"$this->emit('post-created', $post->id); 
+"$this->dispatch('post-created', postId: $post->id); 
 
-"$this->dispatchBrowserEvent('post-created'); 
+"$this->dispatch('post-created'); 
 
-"$this->dispatchBrowserEvent('post-created', ['postId' => $post->id]); 
+"$this->dispatch('post-created', postId: $post->id);
```

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

### Example Blade Layout with `@yield`

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

This is an example of a Blade layout file that uses `@yield('content')` to define a content section where Livewire components can be rendered.

```Blade
<body>
    @yield('content')
</body>
```

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

### Generate Livewire Layout File

Source: https://livewire.laravel.com/docs/index

This command generates the default Livewire layout file (`resources/views/components/layouts/app.blade.php`). This file serves as the HTML structure for Livewire components, with the component's output rendered within the `$slot` variable.

```Bash
php artisan livewire:layout
```

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

### Livewire Update Request Payload Example

Source: https://livewire.laravel.com/docs/understanding-nesting

An example of a request payload sent to the server when a parent component's property is updated. It shows the 'updates' object containing the changed property ('postLimit') and the 'snapshot' object with the component's memo and state.

```json
{
    updates: { postLimit: 1 },
 
    snapshot: {
        memo: { name: 'posts', id: '123' },
 
        state: { postLimit: 2, ... },
    },
}
```

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

### Initialize Profile Component with Mount

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

Example of using the `mount()` method in a Livewire component to initialize `name` and `email` properties by fetching the authenticated user's data. This method is used instead of `__construct()` because Livewire components are re-constructed on subsequent requests.

```PHP
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
 
class UpdateProfile extends Component
{
    public $name;
 
    public $email;
 
    public function mount()
    {
        $this->name = Auth::user()->name;
 
        $this->email = Auth::user()->email;
    }
 
    // ...
}
```

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

### Access Livewire Components via Global Object

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

Provides methods to access Livewire component instances from external JavaScript using the global `Livewire` object. Includes retrieving the first component, finding by ID, getting by name, and getting all components.

```javascript
// Retrieve the $wire object for the first component on the page...
let component = Livewire.first()

// Retrieve a given component's `$wire` object by its ID...
let component = Livewire.find(id)

// Retrieve an array of component `$wire` objects by name...
let components = Livewire.getByName(name)

// Retrieve $wire objects for every component on the page...
let components = Livewire.all()
```

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

### Initialize Component Properties with boot() in Livewire

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

The `boot()` method in Livewire runs at the beginning of every request to initialize component properties. This is useful for setting up protected properties, such as fetching data from a database based on a public property. The example demonstrates initializing a protected `Post` model using `Post::find()` within the `boot()` method.

```PHP
use Livewire\Attributes\Locked;
use Livewire\Component;
use App\Models\Post;
 
class ShowPost extends Component
{
    #[Locked]
    public $postId = 1;
 
    protected Post $post;
 
    public function boot()
    {
        $this->post = Post::find($this->postId);
    }
 
    // ...
}
```

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

### Livewire Test Setup: Set Cookie

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

Sets a specific cookie for the test, simulating browser cookie behavior.

```PHP
Livewire::withCookie('color', 'blue')
```

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

### Livewire Listen for Echo Event with #[On]

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

An example of a Livewire component `OrderTracker` that listens for the `OrderShipped` event on the 'orders' channel using the `#[On]` attribute.

```php
<?php
 
namespace App\Livewire;
 
use Livewire\Attributes\On; 
use Livewire\Component;
 
class OrderTracker extends Component
{
    public $showNewOrderNotification = false;
 
    #[On('echo:orders,OrderShipped')]
    public function notifyNewOrder()
    {
        $this->showNewOrderNotification = true;
    }
 
    // ...
}
```

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

### Publish Livewire Pagination Views (Bash)

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

Shows the Artisan command to publish Livewire's pagination views to the `resources/views/vendor/livewire` directory. This allows for modification of the default Tailwind and Bootstrap pagination styles.

```Bash
php artisan livewire:publish --pagination
```

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

### Inline Livewire Component Class

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

An example of an inline Livewire component in PHP. The `render` method returns a Blade template as a HEREDOC string.

```php
<?php

namespace App\Livewire;

use Livewire\Component;

class CreatePost extends Component
{
    public function render()
    {
        return <<<'HTML'
        <div>
            {{-- Your Blade template goes here... --}}
        </div>
        HTML;
    }
}
```

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

### Initialize Post Component with Mount and Dependency Injection

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

Demonstrates using the `mount()` method to initialize `title` and `content` properties of a `UpdatePost` component by injecting a `Post` model. Livewire supports dependency injection in lifecycle hooks by type-hinting method parameters.

```PHP
use Livewire\Component;
use App\Models\Post;
 
class UpdatePost extends Component
{
    public $title;
 
    public $content;
 
    public function mount(Post $post)
    {
        $this->title = $post->title;
 
        $this->content = $post->content;
    }
 
    // ...
}
```

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

### Livewire Component Render Method Example

Source: https://livewire.laravel.com/docs/computed-properties

This PHP code demonstrates a typical `render()` method in a Livewire component that fetches all posts from the database and passes them to a Blade view. It's a basic way to supply data to templates.

```PHP
public function render()
{
    return view('livewire.show-posts', [
        'posts' => Post::all(),
    ]);
}
```

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

### Livewire Polling with Custom Interval

Source: https://livewire.laravel.com/docs/wire-poll

Examples of how to customize the polling interval in Livewire using the wire:poll directive. The interval can be specified in seconds or milliseconds.

```HTML
<div wire:poll.15s>
</div>

<div wire:poll.15000ms>
</div>
```

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

### Initialize Livewire Component with Data

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

Demonstrates how to initialize a Livewire component with data passed from a parent or route parameters. The `Livewire::test()` method accepts an array of data as its second argument, which is then passed to the component's `mount()` method.

```PHP
<?php

namespace Tests\Feature\Livewire;

use App\Livewire\UpdatePost;
use Livewire\Livewire;
use App\Models\Post;
use Tests\TestCase;

class UpdatePostTest extends TestCase
{
    /** @test */
    public function title_field_is_populated()
    {
        $post = Post::factory()->make([
            'title' => 'Top ten bath bombs',
        ]);

        Livewire::test(UpdatePost::class, ['post' => $post])
            ->assertSet('title', 'Top ten bath bombs');
    }
}
```

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

### Livewire Dynamic Event Name with #[On]

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

An example of using dynamic event name syntax within the `#[On]` attribute to listen for an event with a variable channel parameter.

```php
#[On('echo:orders.{order.id},OrderShipped')]
public function notifyNewOrder()
{
    $this->showNewOrderNotification = true;
}
```

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

### Publish Livewire Frontend Assets

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

This command publishes Livewire's frontend assets, allowing them to be served by the web server instead of through Laravel. It's generally not necessary unless there's a specific need.

```Bash
php artisan livewire:publish --assets
```

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

### Basic wire:navigate Usage

Source: https://livewire.laravel.com/docs/wire-navigate

This example demonstrates how to apply the `wire:navigate` directive to anchor tags for faster, SPA-like page transitions. Livewire intercepts clicks, fetches content in the background, and updates the current page.

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

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

### Livewire Test Setup: Set Multiple Cookies

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

Sets multiple cookies for the test simultaneously, providing a convenient way to manage cookie states.

```PHP
Livewire::withCookies(['color' => 'blue', 'name' => 'Taylor])
```

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

### Livewire UpdatePost Component Mount Method

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

Shows the source code for the `UpdatePost` Livewire component, specifically its `mount()` method. This method receives a `Post` model and initializes the component's `post` and `title` properties with data from the provided post.

```PHP
<?php

namespace App\Livewire;

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

class UpdatePost extends Component
{
    public Post $post;

    public $title = '';

    public function mount(Post $post)
    {
        $this->post = $post;

        $this->title = $post->title;
    }

    // ...
}
```

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

### Livewire Test Setup: Authenticate User

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

Sets a user as the authenticated user for the current test session, allowing tests to be performed as a logged-in user.

```PHP
Livewire::actingAs($user)
```

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

### Livewire 3 Event Assertion Updates

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

Shows the changes in Livewire's testing assertions for events, updating from `assertEmitted` to `assertDispatched` and related methods.

```PHP
-Livewire::test(Component::class)->assertEmitted('post-created'); 
+"Livewire::test(Component::class)->assertDispatched('post-created'); 
 
-Livewire::test(Component::class)->assertEmittedTo(Foo::class, 'post-created'); 
+"Livewire::test(Component::class)->assertDispatchedTo(Foo:class, 'post-created'); 
 
-Livewire::test(Component::class)->assertNotEmitted('post-created'); 
+"Livewire::test(Component::class)->assertNotDispatched('post-created'); 
 
-Livewire::test(Component::class)->assertEmittedUp() 

```

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

### Initializing Livewire Property from URL

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

Demonstrates how a Livewire component property, marked with `#[Url]`, can be initialized from an existing URL query parameter. When a user visits a URL like `https://example.com/users?search=bob`, the `$search` property will automatically be set to 'bob'.

```PHP
use Livewire\Attributes\Url;
use Livewire\Component;

class ShowUsers extends Component
{
    #[Url]
    public $search = ''; // Will be set to "bob"...

    // ...
}
```

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

### Automated Livewire Upgrade

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

This Artisan command automates the upgrade process for Livewire breaking changes. It prompts the user to confirm upgrades for each detected change.

```bash
php artisan livewire:upgrade
```

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

### Livewire Volt: State Property without Initial Value

Source: https://livewire.laravel.com/docs/volt

Example of declaring a state property without an initial value, which will be null or set during component mounting.

```PHP
<?php

use function Livewire\Volt\{mount, state};

state(['count']);

mount(function ($users) {
    $this->count = count($users);

    //
});

?>
```

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

### Using Custom Counter Component with Livewire

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

Example of how to use the custom `<x-input-counter />` Blade component within a Livewire component, binding its value to a Livewire property.

```html
<x-input-counter wire:model="quantity" />
```

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

### Test Livewire Volt Components

Source: https://livewire.laravel.com/docs/volt

Provides guidance on testing Livewire Volt components using the `Volt::test` method, similar to Livewire's standard testing API. It covers basic assertions and method calls within tests.

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

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

### Livewire Component with Custom Address Property

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

Shows a Livewire component that uses a custom `Address` class. This serves as an example for creating a custom Synthesizer to handle this DTO.

```PHP
class UpdateProperty extends Component
{
    public Address $address;

    public function mount()
    {
        $this->address = new Address();
    }
}
```

```PHP
namespace App\Dtos\Address;

class Address
{
    public $street = '';
    public $city = '';
    public $state = '';
    public $zip = '';
}
```

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

### Initialize Component Action with wire:init

Source: https://livewire.laravel.com/docs/wire-init

The `wire:init` directive allows you to execute an action immediately after a Livewire component has rendered. This is useful for loading data without delaying the initial page load. While `wire:init` can be used, Livewire's lazy loading feature is often a more suitable alternative for such scenarios.

```html
<div wire:init="loadPosts">
    <!-- ... -->
</div>
```

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

### Laravel Route Definition for Named Redirect

Source: https://livewire.laravel.com/docs/redirecting

Example of defining a Laravel route with a specific name, which can then be used for redirection within Livewire components via `redirectRoute`.

```PHP
Route::get('/user/profile', function () {
    // ...
})->name('profile');
```

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

### Livewire Component Tree HTML Structure

Source: https://livewire.laravel.com/docs/understanding-nesting

Illustrates the initial HTML structure of a Livewire component tree, showing how parent and nested child components are rendered with their respective IDs and snapshots.

```HTML
<div wire:id="123" wire:snapshot="...">
    Post Limit: <input type="number" wire:model.live="postLimit">

    <div wire:id="456" wire:snapshot="...">
        <h1>The first post</h1>

        <p>Post content</p>

        <button wire:click="$refresh">Refresh post</button>
    </div>

    <div wire:id="789" wire:snapshot="...">
        <h1>The second post</h1>

        <p>Post content</p>

        <button wire:click="$refresh">Refresh post</button>
    </div>
</div>
```

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

### Livewire Test Setup: Disable Lazy Loading

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

Disables lazy loading for the current component test and any nested components, ensuring all components load immediately.

```PHP
Livewire::withoutLazyLoading()
```

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

### Livewire Simple Pagination (PHP)

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

Shows how to implement simple pagination in Livewire using Laravel's `simplePaginate()` method. This method provides only next and previous navigation links, offering improved speed and simplicity for large datasets.

```PHP
public function render()
{
    return view('show-posts', [
        'posts' => Post::simplePaginate(10),
    ]);
}
```

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

### Livewire Test Setup: Set Headers

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

Sets custom HTTP headers for the test request, useful for testing API interactions or custom request logic.

```PHP
Livewire::withHeaders(['X-COLOR' => 'blue', 'X-NAME' => 'Taylor])
```

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

### Update Livewire Composer Dependency

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

This command updates the Livewire package to version 3.0 using Composer. It ensures compatibility with the latest Livewire features and changes.

```bash
composer require livewire/livewire "^3.0"
```

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

### Push Local Branch to Remote Repository

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

This command pushes the newly created local branch to the remote repository, making it available for creating a pull request.

```bash
git push origin my-feature

Enumerating objects: 13, done.
Counting objects: 100% (13/13), done.
Delta compression using up to 8 threads
Compressing objects: 100% (6/6), done.

To github.com:Username/livewire.git
 * [new branch]        my-feature -> my-feature
```

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

### Pull Request Description Template

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

This snippet shows the template used for describing a pull request, including questions about the necessity of the change, branching strategy, scope of changes, inclusion of tests, and a detailed explanation of the improvement.

```markdown
Review the contribution guide first at: https://livewire.laravel.com/docs/contribution-guide
 
1️⃣ Is this something that is wanted/needed? Did you create a discussion about it first?
Yes, you can find the discussion here: https://github.com/livewire/livewire/discussions/999999
 
2️⃣ Did you create a branch for your fix/feature? (Main branch PR's will be closed)
Yes, the branch is named `my-feature`
 
3️⃣ Does it contain multiple, unrelated changes? Please separate the PRs out.
No, the changes are only related to my feature.
 
4️⃣ Does it include tests? (Required)
Yes
 
5️⃣ Please include a thorough description (including small code snippets if possible) of the improvement and reasons why it's useful.
 
These changes will improve memory usage. You can see the benchmark results here: 
 
// ...
```

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

### Livewire Component for File Download

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

This Livewire component demonstrates how to trigger a file download using a standard Laravel response. It includes a mount method to set the invoice and a download method that returns a response()->download() call.

```php
<?php

namespace App\Livewire;

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

class ShowInvoice extends Component
{
    public Invoice $invoice;

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

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

    public function render()
    {
        return view('livewire.show-invoice');
    }
}
```

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

### Update wire:model for Livewire 3

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

Provides a comparison of `wire:model` usage between Livewire 2 and Livewire 3. In Livewire 3, `wire:model` is deferred by default, requiring `wire:model.live` for previous behavior, and `wire:model.defer` becomes the default `wire:model`.

```html
-<input wire:model="..."> 
+<input wire:model.live="..."> 
 
-<input wire:model.defer="..."> 
+<input wire:model="..."> 
 
-<input wire:model.lazy="..."> 
+<input wire:model.blur="...">
```

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

### Livewire wire:loading.class.remove Toggling

Source: https://livewire.laravel.com/docs/wire-loading

Demonstrates the inverse class toggling with `wire:loading.class.remove`. This example removes a background color class from a button when it's clicked.

```html
<button class="bg-blue-500" wire:loading.class.remove="bg-blue-500">
    Save
</button>
```

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

### Head Scripts Loaded Once

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

Demonstrates that identical script tags in the <head> of different pages are only executed on the initial visit.

```html
<!-- Page one -->
<head>
    <script src="/app.js"></script>
</head>
 
<!-- Page two -->
<head>
    <script src="/app.js"></script>
</head>
```

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

### Configure Livewire for Manual JS Bundling

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

Demonstrates how to replace `@livewireScripts` with `@livewireScriptConfig` in the layout to disable Livewire's default JavaScript injection and enable manual bundling.

```html
<!-- ... -->

-    @livewireScripts 
+    @livewireScriptConfig 
 </body>
```