Як зробити Livewire-компонент окремою сторінкою з маршрутом, макетом і заголовком?

Компонент може бути не лише частиною сторінки, а цілою сторінкою - без контролера.

Маршрут у Livewire 4 - через Route::livewire():

// routes/web.php
Route::livewire('/posts/create', 'pages::post.create');
Route::livewire('/posts/{post}', 'pages::post.show');

Макет. Сторінка рендериться всередині макета - за замовчуванням layouts::app (resources/views/layouts/app.blade.php), де має бути {{ $slot }}. Створити його: php artisan livewire:layout. Змінити глобально - ключ component_layout у config/livewire.php; для окремого компонента - атрибут:

new #[Layout('layouts::dashboard')] class extends Component { /* ... */ };

Заголовок сторінки - атрибут #[Title], а в макеті <title>{{ $title ?? config('app.name') }}</title>:

new #[Title('Нова публікація')] class extends Component { /* ... */ };

Для динамічного заголовка - ->title(...) у методі render():

public function render()
{
    return $this->view()->title("Редагування: {$this->post->title}");
}

Параметри маршруту приходять у mount() за назвою, працює і прив'язка моделей:

new class extends Component {
    public Post $post;

    public function mount(Post $post): void
    {
        $this->authorize('update', $post);
        $this->post = $post;
    }
};

Інші слоти макета (наприклад, $lang чи мета-теги) задаються через <x-slot:lang> поза кореневим елементом шаблону компонента.

Що варто пам'ятати:

• mount() виконується лише під час першого завантаження сторінки. Перевірка доступу в mount() не захищає наступні дії компонента - їх авторизують окремо;
• middleware маршруту (auth, can:...) застосовуються як до звичайних маршрутів;
• у Livewire 3 сторінки реєстрували через Route::get('/posts/create', CreatePost::class), а ключ конфігурації називався layout - при оновленні до v4 це змінюється.

Докладніше в документації: Сторінки