Не могу сделать модальное окно (Livewire 4.4.0)

fenix_63 · Вчера 21:50:53

Не могу сделать модальное окно (Livewire).

Всем привет! Делаю pet-проект учебный для себя. Хочу чтоб по клику на кнопку появлялось бы модальное окно. Прочитал что для этого подойдёт Livewire. Композером скачал его, пробую делать так, как написано в документации:

Файл, где расположена кнопка, при клике на которую нужно чтоб появлялось модальное окно:

resources/views/admin.blade.php:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5">
    <title>Админ-панель · Управление постами</title>
    <!-- Font Awesome 6 (Free) для иконок -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
	
</head>

<div class="admin-wrapper">

    <!-- ШАПКА -->
    <header class="admin-header">
        <h1>
            <i class="fas fa-pen-fancy"></i>
            Управление постами
        </h1>
        <div class="header-actions">
            <button class="btn btn-outline"><i class="fas fa-file-export"></i> Экспорт</button>
            <button class="btn btn-primary"><i class="fas fa-plus-circle"></i> Создать пост</button>
			
			
            <!-- Используйте компонент -->
            <livewire:modal-component />
        </div>
    </header>
	
	...
</div>

Файл с классом компонента app/Livewire/ModalComponent.php:

<?php

namespace App\Livewire;

use Livewire\Component;

class ModalComponent extends Component
{
	public bool $showModal = false;

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

	public function openModal()
	{
		$this->showModal = true;
	}

	public function closeModal()
	{
		$this->showModal = false;
	}
}

Файл с версткой (шаблоном) модального окна resources/views/livewire/⚡modal-component.blade.php:

<div>
    <!-- Кнопка для открытия модального окна -->
    <button wire:click="openModal" class="btn btn-primary">
        <i class="fas fa-plus-circle"></i> Добавить пост
    </button>

    <!-- Модальное окно -->
    @if($showModal)
    <div class="modal-overlay" wire:click.self="closeModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>Создание поста</h3>
                <button wire:click="closeModal" class="close-btn">&times;</button>
            </div>
            <div class="modal-body">
                <!-- Содержимое модального окна -->
                <form>
                    <div class="form-group">
                        <label>Заголовок</label>
                        <input type="text" class="form-control" placeholder="Введите заголовок">
                    </div>
                    <div class="form-group">
                        <label>Содержание</label>
                        <textarea class="form-control" rows="5"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button wire:click="closeModal" class="btn btn-secondary">Отмена</button>
                <button class="btn btn-primary">Сохранить</button>
            </div>
        </div>
    </div>
    @endif
</div>

Laravel 12 версии. Livewire 4.4.0

Когда в браузере открываю страницу http://localhost:8000/admin Laravel выдаёт ошибку:

InvalidArgumentException
vendor/laravel/framework/src/Illuminate/View/FileViewFinder.php:138
View [livewire.modal-component] not found

Типо компонент не наёден. Я уже голову сломал - не понимаю почему он не может найти шаблон. Подскажите, как это исправить?

Laravel по-русски

#1 Вчера 21:50:53

Не могу сделать модальное окно (Livewire 4.4.0)

Подвал раздела