1.1. Быстрый старт

Чтобы начать ваше знакомство с Livewire, мы создадим простой компонент "счётчик" и отобразим его в браузере. Этот пример — отличный способ впервые познакомиться с Livewire, так как он демонстрирует интерактивность Livewire самым простым образом.

1. Требования

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

  • Laravel версии 10 или новее
  • PHP версии 8.1 или новее

2. Установка Livewire

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

composer require livewire/livewire
Убедитесь, что Alpine не установлен

Если в вашем приложении уже установлен AlpineJS, вам нужно его удалить, чтобы Livewire работал корректно; в противном случае Alpine будет загружен дважды, и Livewire не сможет функционировать. Например, если вы установили стартовый набор Laravel Breeze "Blade с Alpine", вам нужно удалить Alpine из файла resources/js/app.js.

3. Создание компонента Livewire

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

php artisan make:livewire counter

Эта команда создаст два новых файла в вашем проекте:

  • app/Livewire/Counter.php
  • resources/views/livewire/counter.blade.php

4. Написание класса

Откройте файл app/Livewire/Counter.php и замените его содержимое следующим кодом:

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
 
class Counter extends Component
{
    public $count = 1;
 
    public function increment()
    {
        $this->count++;
    }
 
    public function decrement()
    {
        $this->count--;
    }
 
    public function render()
    {
        return view('livewire.counter');
    }
}

Вот краткое объяснение кода выше:

  • public $count = 1; — Объявляет публичное свойство с именем $count и начальным значением 1.
  • public function increment() — Объявляет публичный метод с именем increment(), который увеличивает значение свойства $count каждый раз, когда вызывается. Такие публичные методы можно вызывать из браузера различными способами, включая нажатие кнопки пользователем.
  • public function render() — Объявляет метод render(), который возвращает Blade-шаблон. Этот шаблон будет содержать HTML-код для нашего компонента.

5. Написание представления

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

<div>
    <h1>{{ $count }}</h1>
 
    <button wire:click="increment">+</button>
 
    <button wire:click="decrement">-</button>
</div>

Этот код будет отображать значение свойства $count и две кнопки, которые увеличивают и уменьшают значение свойства $count соответственно.

Компоненты Livewire ДОЛЖНЫ иметь единственный корневой элемент

Для корректной работы Livewire компоненты должны иметь только один единственный элемент в качестве корневого. Если обнаружено несколько корневых элементов, будет выброшено исключение. Рекомендуется использовать элемент <div>, как показано в примере. HTML-комментарии считаются отдельными элементами и должны быть размещены внутри корневого элемента. При рендеринге компонентов, занимающих всю страницу, именованные слоты для файла макета могут быть размещены вне корневого элемента. Эти слоты удаляются до того, как компонент будет отрендерен.

6. Регистрация маршрута для компонента

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

use App\Livewire\Counter;
 
Route::get('/counter', Counter::class);

Теперь наш компонент counter привязан к маршруту /counter, так что, когда пользователь посещает конечную точку /counter в вашем приложении, этот компонент будет отрендерен в браузере.

7. Создание шаблона макета

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

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

php artisan livewire:layout

Эта команда создаст файл с именем resources/views/components/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 ?? 'Page Title' }}</title>
    </head>
    <body>
        {{ $slot }}
    </body>
</html>

Компонент счётчик будет отрендерен на месте переменной $slot в приведённом выше шаблоне.

Вы могли заметить, что Livewire не предоставляет JavaScript или CSS-ресурсы. Это потому, что начиная с версии Livewire 3, все необходимые фронтенд-ресурсы автоматически внедряются.

8. Проверка работы

Теперь, когда класс компонента и шаблоны готовы, можно приступить к тестированию компонента!

Перейдите по адресу /counter в браузере, и вы должны увидеть число на экране с двумя кнопками для увеличения и уменьшения этого числа.

После нажатия на одну из кнопок вы заметите, что счётчик обновляется в реальном времени без перезагрузки страницы. В этом и заключается магия Livewire: динамичные фронтенд-приложения, написанные полностью на PHP.

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