Перейти к содержанию

Быстрый старт⚓︎

Livewire позволяет создавать динамичные, реактивные интерфейсы, используя только PHP — знание JavaScript не требуется. Вместо написания фронтенд-кода на JavaScript-фреймворках, вы пишете простые PHP-классы и шаблоны Blade, а Livewire берет на себя всю сложную работу с JavaScript.

Для демонстрации мы создадим простую форму добавления постов с валидацией в реальном времени. Вы увидите, как Livewire может валидировать данные и динамически обновлять страницу, не требуя от вас написания ни одной строчки кода на JavaScript или ручной обработки AJAX-запросов.

Предварительные требования⚓︎

Перед началом убедитесь, что у вас установлено следующее:

  • Laravel версии 10 или выше
  • PHP версии 8.1 или выше

Установка Livewire⚓︎

Выполните следующую команду Composer в корневой директории вашего приложения Laravel:

composer require livewire/livewire

Создание макета⚓︎

Перед созданием компонента давайте подготовим файл макета, внутри которого будут отображаться компоненты Livewire. По умолчанию Livewire ищет макет по пути: resources/views/layouts/app.blade.php

Вы можете создать этот файл, выполнив следующую команду:

php artisan livewire:layout

Эта команда сгенерирует файл resources/views/layouts/app.blade.php со следующим содержимым:

<!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 ?? config('app.name') }}</title>

        @vite(['resources/css/app.css', 'resources/js/app.js'])

        @livewireStyles
    </head>
    <body>
        {{ $slot }}

        @livewireScripts
    </body>
</html>

Директивы @livewireStyles и @livewireScripts подключают необходимые ресурсы JavaScript и CSS для работы Livewire. Ваш компонент будет отображаться на месте переменной {{ $slot }}.

Создание компонента Livewire⚓︎

Livewire предоставляет удобную команду Artisan для генерации новых компонентов. Выполните следующую команду, чтобы создать новый компонент страницы:

php artisan make:livewire pages::post.create

Поскольку этот компонент будет использоваться в качестве полноценной страницы, мы используем префикс pages::, чтобы сохранить структуру в директории pages.

Эта команда создаст новый однофайловый компонент по пути resources/views/pages/post/⚡create.blade.php.

К чему здесь эмодзи ⚡?

Символ молнии делает компоненты Livewire мгновенно узнаваемыми в вашем редакторе. Это абсолютно необязательно и может быть отключено в конфигурации по вашему желанию. Подробнее см. в документации по компонентам.

Написание компонента⚓︎

Откройте файл resources/views/pages/post/⚡create.blade.php и замените его содержимое следующим:

<?php

use Livewire\Component;

new class extends Component {
    public string $title = '';

    public string $content = '';

    public function save()
    {
        $this->validate([
            'title' => 'required|max:255',
            'content' => 'required',
        ]);

        dd($this->title, $this->content);
    }
};
?>

<form wire:submit="save">
    <label>
        Заголовок
        <input type="text" wire:model="title">
        @error('title') <span style="color: red;">{{ $message }}</span> @enderror
    </label>

    <label>
        Содержимое
        <textarea wire:model="content" rows="5"></textarea>
        @error('content') <span style="color: red;">{{ $message }}</span> @enderror
    </label>

    <button type="submit">Сохранить</button>
</form>

Не беспокойтесь о стилях

Эта форма намеренно оставлена без стилей, чтобы мы могли сосредоточиться на функциональности Livewire. В реальном приложении вы бы добавили CSS или использовали фреймворк вроде Tailwind.

Вот что происходит в коде выше:

Свойства компонента:

  • public string $title = ''; — Объявляет публичное свойство для заголовка поста
  • public string $content = ''; — Объявляет публичное свойство для содержимого поста

Методы компонента:

  • public function save() — Вызывается при отправке формы. Валидирует данные и выводит результат для тестирования.

Директивы Livewire:

  • wire:submit="save" — Вызывает метод save() при отправке формы, предотвращая стандартную перезагрузку страницы
  • wire:model="title" — Создает двустороннюю привязку данных между полем ввода и свойством $title. По мере ввода текста свойство обновляется автоматически
  • wire:model="content" — Та же двусторонняя привязка для текстовой области (textarea) и свойства $content
  • @error('title') и @error('content') — Отображают сообщения об ошибках, если валидация не пройдена

Компоненты Livewire ОБЯЗАНЫ иметь один корневой элемент

Компоненты должны иметь ровно один корневой HTML-элемент. В этом примере элемент <form> является единственным корнем. Несколько корневых элементов или HTML-комментарии за пределами корневого элемента вызовут ошибку. При рендеринге полностраничных компонентов именованные слоты для макета могут располагаться за пределами корневого элемента.

В реальном приложении

Метод save() использует dd() для вывода значений в целях тестирования. В реальном приложении вы, как правило, сохраняете данные в базу данных и выполняете перенаправление:

<?php

public function save()
{
    $validated = $this->validate([
        'title' => 'required|max:255',
        'content' => 'required',
    ]);
        Post::create($validated); // Предполагается, что у вас есть модель Post и таблица в базе данных
        return $this->redirect('/posts');
}

Регистрация маршрута⚓︎

Откройте файл routes/web.php в вашем приложении Laravel и добавьте следующее:

Route::livewire('/post/create', 'pages::post.create');

Теперь, когда пользователь перейдет по адресу /post/create, Livewire отрендерит компонент pages::post.create внутри вашего файла макета.

Проверка работы⚓︎

Теперь, когда всё готово, давайте протестируем компонент!

Запустите сервер разработки Laravel, если он ещё не запущен:

php artisan serve

Перейдите по адресу http://localhost:8000/post/create в вашем браузере (или http://yourapp.test/post/create, если используете Valet, Herd или аналогичный инструмент).

Вы должны увидеть простую форму с двумя полями и кнопкой отправки.

Попробуйте следующее:

  1. Проверьте валидацию: Нажмите «Сохранить», не заполняя никаких полей. Вы увидите красные сообщения об ошибках, мгновенно появляющиеся под каждым полем — перезагрузка страницы не требуется.

  2. Проверьте отправку: Заполните оба поля и нажмите «Сохранить». Вы должны увидеть экран отладки, показывающий введённые вами значения.

Это демонстрирует главную силу Livewire: реактивная привязка данных, валидация в реальном времени и обработка форм — всё написано на PHP, не касаясь JavaScript.

Решение проблем⚓︎

Ошибка «Component not found» (Компонент не найден):

  • Убедитесь, что файл компонента существует по пути resources/views/pages/post/⚡create.blade.php
  • Проверьте, совпадает ли имя компонента в маршруте: 'pages::post.create'

Форма не отправляется или валидация не отображается:

  • Убедитесь, что @livewireStyles находится внутри тега <head>, а @livewireScripts — перед закрывающим тегом </body> в вашем макете.
  • Проверьте консоль браузера на наличие ошибок JavaScript.

Ошибка 404 при переходе по маршруту:

  • Убедитесь, что маршрут был добавлен в файл routes/web.php

Следующие шаги⚓︎

Теперь, когда вы создали свой первый компонент Livewire, вот несколько ключевых концепций для изучения:

  • Компоненты — Узнайте об отличиях однофайловых и многофайловых компонентов, передаче данных и многом другом
  • Свойства — Поймите, как работают свойства компонентов и их жизненный цикл
  • Действия — Погрузитесь глубже в методы, параметры и обработку событий
  • Формы — Изучите мощные возможности форм Livewire, включая валидацию в реальном времени
  • Валидация — Освойте все возможности валидации Livewire

Мы лишь поверхностно коснулись того, на что способен Livewire. Продолжайте читать документацию, чтобы узнать обо всём, что может предложить Livewire.