Простой пример создания приложения на Livewire 3 для Laravel из официальной документации. Инструкции Livewire 3 по-русски с примерами.

Информация о материале: Родительская категория: Документация Livewire 3; Категория: Начало работы

Простой пример программирования на Livewire для Laravel — Первая программа на Livewire для Laravel

Давайте знакомиться с Livewire!

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

Необходимые условия для запуска Livewire

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

Laravel версии 10 или более поздней.
PHP версии 8.1 или более поздней.

Установка Livewire

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

composer require livewire/livewire

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

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

php artisan make:livewire counter

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

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

Написание класса Livewire

Откройте файл 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.
- Это представление Blade будет содержать HTML-шаблон нашего компонента.

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

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

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

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

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

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

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

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

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

Прежде чем перейти к странице /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>

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

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

Тестируем приложение Livewire

После установки класса и шаблонов наш компонент готов к тестированию!

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

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

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

Перевод с английского официальной документации Livewire 3:
https://livewire.laravel.com/docs/quickstart

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)

Быстрый старт