Livewire Integration

Filament is built on top of Laravel Livewire, providing seamless integration between Livewire components and Filament’s UI components. This page documents the Livewire integration points in Filament.

BasePage

The BasePage class is the foundation for all Filament pages and extends Livewire’s Component class.

Namespace

Filament\Pages\BasePage

Inheritance

Extends: Livewire\Component Implements: HasActions, HasRenderHookScopes, HasSchemas

Methods

render()

Render the Livewire component.

public function render(): View

View

Returns the component view with layout.

Example:

public function render(): View
{
    return view($this->getView(), $this->getViewData())
        ->layout($this->getLayout(), [
            'livewire' => $this,
            'maxContentWidth' => $this->getMaxContentWidth(),
            ...$this->getLayoutData(),
        ]);
}

getView()

Get the view name for the component.

public function getView(): string

string

Returns the view name.

getLayout()

Get the layout view name.

public function getLayout(): string

string

Returns the layout view name.

getHeading()

Get the page heading.

public function getHeading(): string | Htmlable | null

string | Htmlable | null

Returns the page heading.

getSubheading()

Get the page subheading.

public function getSubheading(): string | Htmlable | null

string | Htmlable | null

Returns the page subheading.

getTitle()

Get the page title.

public function getTitle(): string | Htmlable

string | Htmlable

Returns the page title.

getMaxContentWidth()

Get the maximum content width for the page.

public function getMaxContentWidth(): Width | string | null

Width | string | null

Returns the maximum content width.

getExtraBodyAttributes()

Get extra HTML attributes for the page body.

public function getExtraBodyAttributes(): array

array<mixed>

Returns an array of HTML attributes.

Livewire Attributes

#[On(‘refresh-page’)]

The refresh event listener is automatically registered on all pages.

#[On('refresh-page')]
public function refresh(): void {}

Example usage:

// Dispatch from JavaScript
$dispatch('refresh-page')

// Dispatch from Livewire
$this->dispatch('refresh-page');

InteractsWithActions

Pages that implement HasActions use the InteractsWithActions trait, which provides Livewire methods for mounting and calling actions.

Key Methods

mountAction()

Mount an action modal.

public function mountAction(string $name, array $arguments = []): mixed

string

The action name.

array

default:"[]"

Arguments to pass to the action.

callMountedAction()

Execute the mounted action.

public function callMountedAction(): mixed

InteractsWithSchemas

Pages that implement HasSchemas use the InteractsWithSchemas trait, which provides Livewire integration for forms and schema components.

Key Methods

getSchemas()

Get all schemas registered on the component.

public function getSchemas(): array

array

Returns an array of schema instances.

getSchema()

Get a specific schema by name.

public function getSchema(?string $name = null): ?Schema

string | null

The schema name. Defaults to the default schema.

Schema | null

Returns the schema instance or null.

Livewire Properties

Protected Properties

$view

protected string $view;

The view name for the component.

$heading

protected ?string $heading = null;

The page heading.

$subheading

protected ?string $subheading = null;

The page subheading.

$maxContentWidth

protected Width | string | null $maxContentWidth = null;

The maximum content width.

Static Properties

$layout

protected static string $layout = 'filament-panels::components.layout.base';

The default layout view.

$title

protected static ?string $title = null;

The page title.

$formActionsAlignment

public static string | Alignment $formActionsAlignment = Alignment::Start;

The alignment for form actions.

$formActionsAreSticky

public static bool $formActionsAreSticky = false;

Whether form actions should be sticky.

$hasInlineLabels

public static bool $hasInlineLabels = false;

Whether forms should use inline labels.

Wire Loading States

Filament components automatically integrate with Livewire’s wire:loading directive. Example:

<div wire:loading>
    Loading...
</div>

<div wire:loading.remove>
    Content
</div>

Wire Model Binding

Filament form components automatically use Livewire’s wire:model directive for data binding. Example:

use Filament\Forms\Components\TextInput;

TextInput::make('name')
    ->live() // Updates on every keystroke
    ->afterStateUpdated(fn ($state) => /* ... */);

Error Handling

Filament integrates with Livewire’s validation error handling.

public static ?Closure $reportValidationErrorUsing = null;

You can customize validation error reporting by setting this property.

​BasePage

​Namespace

​Inheritance

​Methods

​render()

​getView()

​getLayout()

​getHeading()

​getSubheading()

​getTitle()

​getMaxContentWidth()

​getExtraBodyAttributes()

​Livewire Attributes

​#[On(‘refresh-page’)]

​InteractsWithActions

​Key Methods

​mountAction()

​callMountedAction()

​InteractsWithSchemas

​Key Methods

​getSchemas()

​getSchema()

​Livewire Properties

​Protected Properties

​$view

​$heading

​$subheading

​$maxContentWidth

​Static Properties

​$layout

​$title

​$formActionsAlignment

​$formActionsAreSticky

​$hasInlineLabels

​Wire Loading States

​Wire Model Binding

​Error Handling

​Related Documentation

BasePage

Namespace

Inheritance

Methods

render()

getView()

getLayout()

getHeading()

getSubheading()

getTitle()

getMaxContentWidth()

getExtraBodyAttributes()

Livewire Attributes

#[On(‘refresh-page’)]

InteractsWithActions

Key Methods

mountAction()

callMountedAction()

InteractsWithSchemas

Key Methods

getSchemas()

getSchema()

Livewire Properties

Protected Properties

$view

$heading

$subheading

$maxContentWidth

Static Properties

$layout

$title

$formActionsAlignment

$formActionsAreSticky

$hasInlineLabels

Wire Loading States

Wire Model Binding

Error Handling

Related Documentation