Livewire

https://livewire.laravel.com/docs
Admin
Livewire is a full-stack framework for Laravel that allows developers to build dynamic, reactive...
Tokens:231,468
Snippets:2,530
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### Setup Livewire locally

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

Commands to fork, clone, and install dependencies for the Livewire repository.

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

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

### Basic Livewire Pagination Setup

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

Demonstrates the fundamental setup for pagination in a Livewire component. It requires the `WithPagination` trait and uses `Post::paginate(10)` to fetch data and `$this->posts->links()` to render navigation. This enables seamless page transitions within the same page view.

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

use Livewire\Attributes\Computed;
use Livewire\WithPagination;
use Livewire\Component;
use App\Models\Post;

new class extends Component {
    use WithPagination;

    #[Computed]
    public function posts()
    {
        return Post::paginate(10);
    }
};
```

```blade
<div>
    <div>
        @foreach ($this->posts as $post) 
            <!-- ... -->
        @endforeach
    </div>

    {{ $this->posts->links() }}
</div>
```

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

### Use namespaced components

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

Examples of creating, rendering, and routing namespaced components.

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

```html
<livewire:admin::users-table />
```

```php
Route::livewire('/admin/users', 'admin::users-table');
```

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

### Livewire Setup Methods

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

Methods for configuring the testing environment before interacting with Livewire components.

```APIDOC
## Livewire Setup Methods

### Description
Methods for configuring the testing environment before interacting with Livewire components.

### Methods

#### `Livewire::test('component.name')`
**Description:** Test the specified Livewire component.
**Example:** `Livewire::test('post.create')`

#### `Livewire::test(ComponentClass::class, ['param' => $value])`
**Description:** Test a Livewire component class, passing parameters to its `mount()` method.
**Example:** `Livewire::test(UpdatePost::class, ['post' => $post])`

#### `Livewire::actingAs($user)`
**Description:** Set the authenticated user for the current test.
**Example:** `Livewire::actingAs($user)`

#### `Livewire::withQueryParams(['param' => 'value'])`
**Description:** Set URL query parameters for the test.
**Example:** `Livewire::withQueryParams(['search' => 'livewire'])`

#### `Livewire::withCookie('name', 'value')`
**Description:** Set a single cookie for the test.
**Example:** `Livewire::withCookie('session', '...')`

#### `Livewire::withCookies(['name1' => 'value1', 'name2' => 'value2'])`
**Description:** Set multiple cookies for the test.
**Example:** `Livewire::withCookies(['color' => 'blue', 'user' => 'test'])`

#### `Livewire::withHeaders(['X-Header' => 'value'])`
**Description:** Set custom HTTP headers for the test.
**Example:** `Livewire::withHeaders(['Authorization' => 'Bearer ...'])`

#### `Livewire::withoutLazyLoading()`
**Description:** Disable lazy loading for all components within this test.
**Example:** `Livewire::withoutLazyLoading()`
```

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

### Example URL with query parameter

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

The resulting URL format when the search property is synced.

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

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

### Start the Laravel development server

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

Run this command in the terminal to serve the application locally.

```bash
php artisan serve
```

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

### Install Browser Testing Dependencies

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

Install the Pest browser plugin and Playwright for end-to-end testing.

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

```bash
npm install playwright@latest
npx playwright install
```

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

### Example of a Dynamically Rendered Livewire Step Component

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

This is an example of a simple Livewire component that could be dynamically rendered by a parent component. It displays basic content and serves as a placeholder for a specific step in a process. This component requires no specific props or methods for this basic example.

```php
<?php // resources/views/components/⚡step-one.blade.php

use Livewire\Component;

new class extends Component {
    // 
};
?>

<div>
    Step One Content
</div>
```

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

### Setup Alpine locally

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

Commands to fork, clone, build, and link Alpine packages for local development.

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

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

### Install Livewire via Composer

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

Run this command in your Laravel application root to install the Livewire package.

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

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

### Use Simple and Cursor Pagination

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

Examples of using simplePaginate for basic navigation and cursorPaginate for high-performance pagination on large datasets.

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

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

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

### Example: Real-time Notification Bell

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

A practical example showcasing how #[On] can be used to implement a real-time notification counter.

```APIDOC
## POST /notification/update

### Description
This example demonstrates a notification bell component that updates its unread count based on dispatched events.

### Method
POST (simulated event dispatch)

### Endpoint
N/A (Client-side event listening and dispatching)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```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()
    {
        // Initialize unread count on component mount
        $this->unreadCount = auth()->user()->unreadNotifications()->count();
    }

    #[On('notification-sent')] // Listen for new notifications
    public function incrementCount()
    {
        $this->unreadCount++;
    }

    #[On('notifications-read')] // Listen for notifications being marked as read
    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
// Dispatching events from other parts of the application
// Example: Dispatching when a new notification is sent
$this->dispatch('notification-sent');

// Example: Dispatching when notifications are read
$this->dispatch('notifications-read');
```

### Response
#### Success Response (200)
None (Component state updates)

#### Response Example
(No direct response, UI updates dynamically based on event triggers)
```

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

### Start Laravel Development Server (Shell)

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

This command starts the built-in PHP development server for a Laravel application, making it accessible via a local URL. It's a common step for testing Laravel applications during development. Requires PHP and Composer installed.

```shell
php artisan serve
```

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

### Install Pest Browser Testing Plugin

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

Commands to install the Pest browser testing plugin and Playwright, enabling browser automation for testing Livewire components.

```shell
composer require pestphp/pest-plugin-browser --dev
npm install playwright@latest
npx playwright install
```

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

### Basic wire:click Syntax

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

Reference examples for the basic syntax of the `wire:click` directive.

```html
wire:click="methodName"
wire:click="methodName(param1, param2)"
```

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

### Install Pest for Livewire Testing

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

Commands to remove PHPUnit and install Pest as the testing framework for Livewire components. Pest is recommended for its simplicity and integration with Livewire.

```shell
composer remove phpunit/phpunit
composer require pestphp/pest --dev --with-all-dependencies
./vendor/bin/pest --init
```

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

### Install Livewire v4

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

Update the project dependencies to include Livewire v4.

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

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

### Defining a Livewire component with JavaScript actions

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

Example of a Livewire component structure that supports bookmarking logic.

```php
<?php // resources/views/components/post/⚡show.blade.php
	
use Livewire\Component;
use App\Models\Post;
	
new class extends Component {
    public Post $post;
	
    public $bookmarked = false;
	
    public function mount()
    {
        $this->bookmarked = $this->post->bookmarkedBy(auth()->user());
    }
	
    public function bookmarkPost()
    {
        $this->post->bookmark(auth()->user());
	
        $this->bookmarked = $this->post->bookmarkedBy(auth()->user());
    }
};
```

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

### Test Livewire with PHPUnit

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

Provides an example of using standard PHPUnit syntax to test Livewire components as an alternative to Pest.

```php
<?php

namespace Tests\Feature\Livewire;

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

class CreatePostTest extends TestCase
{
    public function test_can_create_post()
    {
        $this->assertEquals(0, Post::count());

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

        $this->assertEquals(1, Post::count());
    }
}
```

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

### Dynamic Child Component Rendering

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

This example shows how to render child components dynamically at run-time using the `<livewire:dynamic-component>` tag and an `:is` prop.

```APIDOC
## Dynamic child components

### Description
This example demonstrates how to render child components dynamically at run-time using the `<livewire:dynamic-component>` tag, which accepts an `:is` prop to specify the component to render.

### Method
N/A (Component rendering)

### Endpoint
N/A (Component rendering)

### Parameters
#### Query Parameters
- **is** (string) - Required - The name of the component to render.

### Request Example
```html
<livewire:dynamic-component :is="$current" />
```

### Response
N/A (Component rendering)
```

```APIDOC
## Dynamic Child Component Example (Multi-step Form)

### Description
This example illustrates a practical use case for dynamic components: rendering different steps of a multi-step form.

### Method
N/A (Component rendering)

### Endpoint
N/A (Component rendering)

### Parameters
#### Path Parameters
- **current** (string) - Required - The name of the current step component to display.

#### Query Parameters
- **wire:key** (string) - Required - A unique key to ensure proper re-rendering of the dynamic component.

### Request Example
```php
<?php // resources/views/components/steps.blade.php

use Livewire\Component;

new class extends Component {
    public $current = 'step-one';

    protected $steps = [
        'step-one',
        'step-two',
        'step-three',
    ];

    public function next()
    {
        $currentIndex = array_search($this->current, $this->steps);

        $this->current = $this->steps[$currentIndex + 1];
    }
};
?>

<div>
    <livewire:dynamic-component :is="$current" :wire:key="$current" />

    <button wire:click="next">Next</button>
</div>
```

### Response
N/A (Component rendering)
```

```APIDOC
## Example of a Dynamic Child Component

### Description
This shows a simple child component that would be rendered by the dynamic component example above.

### Method
N/A (Component definition)

### Endpoint
N/A (Component definition)

### Parameters
N/A

### Request Example
```php
<?php // resources/views/components/step-one.blade.php

use Livewire\Component;

new class extends Component {
    //
};
?>

<div>
    Step One Content
</div>
```

### Response
N/A (Component definition)
```

```APIDOC
## Alternative Syntax for Dynamic Components

### Description
Provides an alternative syntax for rendering dynamic components using `<livewire:is>`.

### Method
N/A (Component rendering)

### Endpoint
N/A (Component rendering)

### Parameters
#### Query Parameters
- **component** (string) - Required - The name of the component to render.
- **wire:key** (string) - Required - A unique key to ensure proper re-rendering of the dynamic component.

### Request Example
```html
<livewire:is :component="$current" :wire:key="$current" />
```

### Response
N/A (Component rendering)
```

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

### Inspect Component Tree HTML

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

Example of the rendered HTML structure showing independent wire:id and wire:snapshot attributes.

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

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

### Initialize Common PHP Object Types

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

Example of assigning supported PHP objects like Collections, Models, and DateTimes to component properties.

```php
public function mount()
{
    $this->todos = collect([]); // Collection
 
    $this->todos = Todos::all(); // Eloquent Collection
 
    $this->todo = Todos::first(); // Model
 
    $this->date = new DateTime('now'); // DateTime
 
    $this->date = new Carbon('now'); // Carbon
 
    $this->todo = str(''); // Stringable
}
```

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

### PHP Component for JavaScript Action Example

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

This PHP component sets up the state for a bookmarking feature, including a mount method to check the initial bookmark status and a bookmarkPost method to persist the change.

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

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

new class extends Component {
    public Post $post;

    public $bookmarked = false;

    public function mount()
    {
        $this->bookmarked = $this->post->bookmarkedBy(auth()->user());
    }

    public function bookmarkPost()
    {
        $this->post->bookmark(auth()->user());

        $this->bookmarked = $this->post->bookmarkedBy(auth()->user());
    }
};
```

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

### Initialize properties with boot()

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

Use the boot method to run logic on every request, such as initializing protected properties.

```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() 
    {
        $this->post = Post::find($this->postId);
    }
 
    // ...
};
```

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

### Testing File Downloads in Livewire

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

Provides examples for testing file download functionality using the assertFileDownloaded and assertNoFileDownloaded methods in Livewire tests.

```php
public function test_can_download_invoice()
{
    $invoice = Invoice::factory();
    Livewire::test(ShowInvoice::class)
        ->call('download')
        ->assertFileDownloaded('invoice.pdf');
}

public function test_does_not_download_invoice_if_unauthorised()
{
    $invoice = Invoice::factory();
    Livewire::test(ShowInvoice::class)
        ->call('download')
        ->assertNoFileDownloaded();
}
```

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

### Initialize Component State with mount()

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

Demonstrates using the mount() method to initialize component properties from the authenticated user or injected models. This method runs only once when the component is first created.

```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
use Livewire\Component;
use App\Models\Post;

new class extends Component {
    public $title;
    public $content;

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

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

### Vulnerable Livewire component example

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

An example of a component that fails to validate or authorize user input, demonstrating a potential security vulnerability.

```php
<?php // resources/views/components/post/⚡edit.blade.php
	
use Livewire\Component;
use App\Models\Post;
	
new class extends Component {
    public $id;
    public $title;
    public $content;
	
    public function mount(Post $post)
    {
        $this->id = $post->id;
        $this->title = $post->title;
        $this->content = $post->content;
    }
	
    public function update()
    {
        $post = Post::findOrFail($this->id);
	
        $post->update([
            'title' => $this->title,
            'content' => $this->content,
        ]);
	
        session()->flash('message', 'Post updated successfully!');
    }
};
```

```html
<form wire:submit="update">
    <input type="text" wire:model="title">
    <input type="text" wire:model="content">
	
    <button type="submit">Update</button>
</form>
```

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

### Configure Content-Security-Policy Headers

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

Example of CSP headers configured for Livewire's CSP-safe build. It emphasizes removing 'unsafe-eval' and utilizing nonce-based script loading with 'strict-dynamic'.

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

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

### Configuring Default Placeholder View in Livewire

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

Provides an example of how to set a default placeholder view for all lazy-loaded Livewire components by configuring the `component_placeholder` option in `config/livewire.php`. This ensures a consistent loading experience.

```php
'component_placeholder' => 'livewire.placeholder',
```

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

### Valid vs. Invalid @teleport Structure

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

Highlights the constraint that the @teleport directive requires a single root element within its content. The 'Valid' example shows a single div wrapping the content, while the 'Invalid' example shows multiple root-level elements, which is not supported.

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

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

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

### Sample Livewire Simple Pagination View

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

An unstyled example of a Livewire pagination view. It demonstrates using Livewire's page navigation helpers like '$this->nextPage()' with 'wire:click' for interactive pagination controls.

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

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

### $wire.$get(name)

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

Retrieves the value of a component property by its name.

```APIDOC
## $wire.$get(name)

### Description
Get the value of a property by name.

### Parameters
- **name** (string) - Required - The name of the property to retrieve.
```

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

### Initialize Component Properties in Mount

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

Demonstrates how to set initial values for component properties using the mount() lifecycle method. This ensures properties are populated when the component is first rendered.

```php
use Livewire\Component;

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

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

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

### Initialize Livewire and Alpine in JavaScript

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

Import Livewire and Alpine into your build process to register plugins and manually trigger initialization.

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

Alpine.plugin(Clipboard)

Livewire.start()
```

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

### Publish Livewire Configuration

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

Run this command to create a livewire.php file in the config directory for custom settings.

```shell
php artisan livewire:config
```

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

### Registering components in a service provider

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

Use these methods within a service provider's boot method to manually register components, directories, or namespaces.

```php
use Livewire\Livewire;
 
// In a service provider's boot() method (e.g., App\Providers\AppServiceProvider)
Livewire::addComponent(
    name: 'custom-button',
    viewPath: resource_path('views/ui/button.blade.php')
);
```

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

```php
Livewire::addNamespace(
    namespace: 'ui',
    viewPath: resource_path('views/ui')
);
```

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

### Example URL for named paginator

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

The URL structure when using a custom pageName parameter.

```text
https://application.test/customers?page=2&invoices-page=2
```

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

### Write Browser Tests

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

Use Livewire::visit to simulate user interactions in a real browser environment.

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

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

### Example URL for paginated results

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

The default URL structure when navigating to a specific page.

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

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

### Configure Smart wire:key

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

Set the default behavior for wire:key in config/livewire.php.

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

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

### Define a complex Livewire component

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

A component example using a collection as a public property.

```php
<?php
 
use Livewire\Component;
 
new class extends Component {
    public $todos;
 
    public function mount() {
        $this->todos = collect([
            'first',
            'second',
            'third',
        ]);
    }
};
```

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

### Initialize Component Properties with boot()

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

The boot method runs on every request to the server, making it ideal for initializing non-persisted properties like Eloquent models. It is recommended to use the #[Locked] attribute for sensitive properties to prevent client-side tampering.

```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()
    {
        $this->post = Post::find($this->postId);
    }
};
```

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

### Embed snapshot in HTML

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

Example of how the snapshot is embedded into the component's root element.

```html
<div wire:id="..." wire:snapshot="{ state: {...}, memo: {...} }">
    Count: 1
 
    <button wire:click="increment">+</button>
</div>
```

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

### Initialize Livewire Component Tests

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

Methods to instantiate a Livewire component for testing, optionally passing parameters to the mount method.

```php
Livewire::test('post.create');
Livewire::test(UpdatePost::class, ['post' => $post]);
```

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

### Showing a Loading Indicator

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

Provides examples of how to display a loading indicator during form submission.

```APIDOC
## Showing a Loading Indicator

By default, Livewire will automatically disable submit buttons and mark inputs as `readonly` while a form is being submitted, preventing the user from submitting the form again while the first submission is being handled.

However, it can be difficult for users to detect this "loading" state without extra affordances in your application's UI.

### Using `wire:loading`

Here's an example of adding a small loading spinner to the "Save" button via `wire:loading` so that a user understands that the form is being submitted:

### Request Example
```html
<button type="submit">
    Save

    <div wire:loading>
        <svg>...</svg> <!-- SVG loading spinner -->
    </div>
</button>
```

### Using Tailwind CSS and `data-loading` attribute

Alternatively, you can use Tailwind and Livewire's automatic `data-loading` attribute for cleaner markup:

### Request Example
```html
<button type="submit">
    <span class="in-data-loading:hidden">Save</span>
    <span class="not-in-data-loading:hidden">
        <svg>...</svg> <!-- SVG loading spinner -->
    </span>
</button>
```

[Learn more about loading states →](/docs/4.x/loading-states)
```

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

### Configure Make Command Defaults

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

Set default component generation settings.

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

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

### Publish Livewire configuration

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

Run this command to publish the configuration file to the application's config directory.

```bash
php artisan livewire:config
```

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

### Generate and Configure Layouts

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

Commands and configuration for setting up the default application layout file used by Livewire components.

```shell
php artisan livewire:layout
```

```php
'component_layout' => 'layouts::dashboard',
```

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

### Install Livewire v4

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

Update your composer.json to require Livewire v4 and clear the application cache.

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

```bash
php artisan optimize:clear
```

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

### Bind properties in a Livewire component

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

Example of a component class with properties bound to form inputs.

```php
use Livewire\Component;
use App\Models\Post;
 
class CreatePost extends Component
{
    public $title = '';
 
    public $content = '';
 
    public function save()
    {
        $post = Post::create([
            'title' => $this->title
            'content' => $this->content
        ]);
 
        // ...
    }
}
```

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

### Create a multi-file component

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

Generate a component with separate files for logic, templates, and assets.

```bash
php artisan make:livewire post.create --mfc
```

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

### Single-file component structure

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

Example of a single-file component containing both the PHP class and the Blade template.

```php
<?php
 
use Livewire\Component;
 
new class extends Component {
    public $title = '';
 
    public function save()
    {
        // Save logic here...
    }
};
?>
 
<div>
    <input wire:model="title" type="text">
    <button wire:click="save">Save Post</button>
</div>
```

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

### Conditional access without computed properties

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

Example of a template where data is fetched even if not used.

```blade
<div>
    @if (Auth::user()->can_see_posts)
        @foreach ($posts as $post)
            <div wire:key="{{ $post->id }}">
                <!-- ... -->
            </div>
        @endforeach
    @endif
</div>
```

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

### View component snapshot state

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

Example of a serialized component state containing a Laravel collection.

```json
state: {
    todos: [
        [ 'first', 'second', 'third' ],
        { s: 'clctn', class: 'Illuminate\Support\Collection' },
    ],
},
```

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

### Bundling Deferred Livewire Components

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

Illustrates how to bundle multiple deferred Livewire components into a single network request using the `bundle: true` parameter within the `#[Defer]` attribute. This optimization reduces the number of HTTP requests, especially when many deferred components are present on the same page, improving loading efficiency.

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

use Livewire\Attributes\Defer;
use Livewire\Component;

new #[Defer(bundle: true)] class extends Component {
    // ...
};
?>
```

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

### Dynamically Control Transitions with transition() Method in PHP

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

Demonstrates the imperative approach to controlling view transitions using the `transition()` method within a Livewire component. This method allows for dynamic setting of transition types based on runtime logic, such as comparing current and target step values.

```php
<?php

// ... inside a Livewire component class

public function goToStep($step)
{
    $this->transition(type: $step > $this->step ? 'forward' : 'backward');

    $this->step = $step;
}

```

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

### Listening for specific keys

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

Examples of using key modifiers to trigger actions on specific key presses.

```html
<input wire:model="query" wire:keydown.enter="searchPosts">
```

```html
<input wire:keydown.shift.enter="...">
```

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

### Usage of Custom Counter Component

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

Example of implementing the custom counter component with wire:model binding.

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

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

### Class-based component file structure

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

Example of the generated PHP class and Blade view for a class-based component.

```php
<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class CreatePost extends Component
{
    public function render()
    {
        return view('livewire.create-post');
    }
}
```

```blade
<div>
    {{-- ... --}}
</div>
```

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

### Create Livewire Components

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

Use the Artisan CLI to generate single-file or multi-file Livewire components. The `--mfc` flag enables multi-file components.

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

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

### Class-Based Component PHP File

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

Example of a class-based Livewire component's PHP file structure.

```php
<?php

namespace App\Livewire;

use Livewire\Component;

class CreatePost extends Component
{
	public function render()
	{
		return view('livewire.create-post');
	}
}
```

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

### Implement a Countdown with wire:stream

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

This example demonstrates a Livewire component that uses the stream method to update a UI element in real-time. It uses a while loop and sleep to simulate a long-running process that updates the browser display incrementally.

```php
use Livewire\Component;

class CountDown extends Component
{
    public $start = 3;

    public function begin()
    {
        while ($this->start >= 0) {
            $this->stream(
                to: 'count',
                content: $this->start,
                replace: true,
            );

            sleep(1);

            $this->start = $this->start - 1;
        };
    }

    public function render()
    {
        return <<<'HTML'
        <div>
            <button wire:click="begin">Start count-down</button>

            <h1>Count: <span wire:stream="count">{{ $start }}</span></h1>
        </div>
        HTML;
    }
}
```

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

### Use simple pagination

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

Implement simplePaginate for faster performance with only next/previous links.

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

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

### Simplified Snapshot State

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

An example of a naive state representation that lacks the necessary metadata for proper hydration.

```js
state: {
    todos: [ 'first', 'second', 'third' ],
},
```

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

### Listen for Livewire Events Globally with JavaScript

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

This code demonstrates how to listen for Livewire events ('post-created') from any script in your application using `Livewire.on`. It includes the necessary `livewire:init` event listener and shows how to optionally unregister the listener using the returned cleanup function.

```html
document.addEventListener('livewire:init', () => {
   Livewire.on('post-created', (event) => {
       //
   });
});
```

```html
document.addEventListener('livewire:init', () => {
    let cleanup = Livewire.on('post-created', (event) => {
        //
    });

    // Calling "cleanup()" will un-register the above event listener...
    cleanup();
});
```

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

### Livewire Component Update Payload

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

Example of the JSON payload sent to the server when a component update is triggered.

```js
{
    calls: [
        { method: 'increment', params: [] },
    ],

    snapshot: {
        state: {
            count: 1,
        },

        memo: {
            name: 'counter',

            id: '1526456',
        },
    }
}
```

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

### Manage Livewire component formats

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

Commands to create or convert between single-file and multi-file component formats.

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

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

### Property binding syntax

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

Examples of various ways to bind properties, including nested objects and array indices.

```blade
wire:model="propertyName"
wire:model="property.nested"
wire:model="property['nested']"
wire:model="property[0]"
```

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

### Example Dehydrated Model JSON

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

Shows the structure of a serialized Livewire model property before and after applying a morphMap alias.

```json
{
    "type": "model",
    "class": "App\Models\Post",
    "key": 1,
    "relationships": []
}
```

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

### Convert Livewire component formats via CLI

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

Use these commands to switch between single-file and multi-file component structures.

```bash
php artisan livewire:convert post.create --mfc
```

```bash
php artisan livewire:convert post.create --sfc
```

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

### Enable Smart Wire:key Behavior

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

The 'smart_wire_keys' configuration now defaults to true in v4, helping prevent issues with deeply nested components. Manual 'wire:key' is still required in loops.

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

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

### Embed Snapshot in HTML

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

Example of how the JSON snapshot is stored within the wire:snapshot attribute in the rendered HTML.

```html
<div wire:id="..." wire:snapshot="{ state: {...}, memo: {...} }">
    Count: 1

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

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

### Configure custom and dynamic session keys

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

Shows how to define explicit session keys or generate them dynamically based on other component properties for granular state control.

```php
use Livewire\Attributes\Session;
use Livewire\Component;
use App\Models\Author;

new class extends Component {
    #[Session(key: 'post_search')]
    public $search = '';

    public Author $author;

    #[Session(key: 'search-{author.id}')]
    public $dynamicSearch = '';
};
```

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

### Livewire Testing Methods

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

A reference of available methods for testing Livewire components, including setup, interaction, and assertions.

```APIDOC
## Setup Methods

- `Livewire::test($component, $params = [])`: Initialize a component test.
- `Livewire::actingAs($user)`: Set the authenticated user.
- `Livewire::withQueryParams($params)`: Set URL query parameters.
- `Livewire::withCookie($name, $value)`: Set a single cookie.
- `Livewire::withCookies($cookies)`: Set multiple cookies.
- `Livewire::withHeaders($headers)`: Set custom request headers.
- `Livewire::withoutLazyLoading()`: Disable lazy loading for components.

## Interacting with Components

- `set($property, $value)`: Set a property value.
- `toggle($property)`: Toggle a boolean property.
- `call($method, ...$params)`: Execute a component action.
- `refresh()`: Trigger a component re-render.
- `dispatch($event, ...$params)`: Dispatch an event.

## Assertions

- `assertSet($property, $value)`: Assert property value.
- `assertNotSet($property, $value)`: Assert property does not equal value.
- `assertCount($property, $count)`: Assert property count.
- `assertSee($text)`: Assert text presence in HTML.
- `assertDontSee($text)`: Assert text absence in HTML.
- `assertSeeHtml($html)`: Assert raw HTML presence.
- `assertDontSeeHtml($html)`: Assert raw HTML absence.
- `assertSeeInOrder($array)`: Assert strings appear in order.
- `assertDispatched($event)`: Assert event was dispatched.
- `assertNotDispatched($event)`: Assert event was not dispatched.
- `assertHasErrors($errors)`: Assert validation errors.
- `assertHasNoErrors($property)`: Assert no validation errors.
- `assertRedirect($url)`: Assert redirect occurred.
- `assertNoRedirect()`: Assert no redirect occurred.
- `assertViewHas($key, $value)`: Assert view data.
- `assertViewIs($view)`: Assert rendered view.
- `assertJs($expression)`: Assert JS evaluation.
- `assertNoJs()`: Assert no JS evaluation.
- `assertFileDownloaded($filename)`: Assert file download.
- `assertUnauthorized()`: Assert 401 status.
- `assertForbidden()`: Assert 403 status.
- `assertStatus($code)`: Assert specific HTTP status code.
```

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

### Create a Page Component

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

Use the `pages::` namespace with the `make:livewire` command to create components intended for full-page usage. This organizes them in the `resources/views/pages/` directory.

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

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

### View plain array state representation

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

Example of how state would appear without metadata, losing type information.

```json
state: {
    todos: [ 'first', 'second', 'third' ],
},
```

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

### Livewire Component PHP Example

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

A basic Livewire component written in PHP. This serves as the server-side counterpart to the JavaScript interactions.

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

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

### Class-Based Component Blade View File

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

Example of a class-based Livewire component's Blade view file structure.

```blade
<div>
	{{-- ... --}}
</div>
```

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

### Downloading Files via Storage Facade

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

Shows how to download files stored on specific disks using the Laravel Storage facade within a Livewire component.

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

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

### Listen for and Dispatch Events in Livewire

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

Demonstrates how to use the #[On] attribute to listen for events and the dispatch method to trigger them. This pattern allows for decoupled communication between components.

```php
use Livewire\Attributes\On;
use Livewire\Component;

class Dashboard extends Component {
    #[On('post-created')]
    public function updatePostList($title) {
        session()->flash('status', "New post created: {$title}");
    }
}

// Dispatching the event
$this->dispatch('post-created', title: 'My New Post');
```

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

### Dehydrated Property JSON Structure

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

Example of the serialized data format sent to the browser, which may expose internal class names.

```json
{
    "type": "model",
    "class": "App\Models\Post",
    "key": 1,
    "relationships": []
}
```

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

### Create a Multi-File Livewire Component

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

Generate a multi-file component using the `--mfc` flag with the `make:livewire` command. This separates the component's PHP, Blade, JavaScript, and CSS into distinct files within a dedicated directory.

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

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

### Use Class-Based Components (v3 Convention)

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

To adopt v3 conventions and generate class-based components by default, configure `config/livewire.php` with `'type' => 'class'` and `'emoji' => false`.

```php
return [
    // ...
    'make_command' => [
        'type' => 'class',
        'emoji' => false,
    ],
    // ...
];
```

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

### Malicious HTML Form Manipulation

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

Example of how a user might manually inject an input field into the DOM to manipulate component properties.

```html
<form wire:submit="update">
    <input type="text" wire:model="id"> 
    <input type="text" wire:model="title">
    <input type="text" wire:model="content">
 
    <button type="submit">Update</button>
</form>
```

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

### Livewire Component State Example (Stringable Property)

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

This PHP code demonstrates a Livewire component with a public property that is a Laravel Stringable. The `mount` method initializes the property as a Stringable, showcasing how Livewire handles such types using Synthesizers.

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

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

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

### Vulnerable Livewire Component Method

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

This example demonstrates a security risk where a public method is accessible from the client-side even if not explicitly referenced in the template.

```php
// Warning: This snippet demonstrates what NOT to do...
<?php // resources/views/components/post/⚡index.blade.php
 
use Illuminate\Support\Facades\Auth;
use Livewire\Attributes\Computed;
use Livewire\Component;
use App\Models\Post;
 
new class extends Component {
    #[Computed]
    public function posts()
    {
        return Auth::user()->posts;
    }
 
    public function deletePost($id)
    {
        if (! Auth::user()->isAdmin) {
            abort(403);
        }
 
        $this->delete($id); 
    }
 
    public function delete($postId)  
    {
        $post = Post::find($postId);
 
        $post->delete();
    }
};
```

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

### Create a Livewire component

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

Generates a new single-file component using the Artisan CLI.

```bash
php artisan make:livewire post.create
```
Tokens:
Raw