Установка Livewire 3 и ручная настройка Livewire и Alpine для правильной работы в Laravel.

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

Инструкция по установке Livewire 3 Laravel на сервер — Документация по установке Livewire 3 на сервер

Livewire - это пакет расширения Laravel

Livewire - это пакет Laravel, поэтому перед установкой и использованием Livewire необходимо иметь запущенное приложение Laravel. Если требуется помощь в настройке нового приложения Laravel, смотрите документацию по установке Laravel.

Чтобы установить Livewire, откройте терминал и перейдите в каталог приложения Laravel, затем выполните следующую команду:

composer require livewire/livewire

Вот, собственно, и все. Если требуется больше возможностей для настройки, продолжайте читать. В противном случае можно сразу приступать к использованию Livewire.

Размещение конфигурационного файла Livewire

Livewire имеет " zero-config", то есть его можно использовать, следуя соглашениям, без какой-либо дополнительной настройки. Однако при необходимости можно опубликовать и настроить конфигурационный файл Livewire, выполнив следующую команду Artisan:

php artisan livewire:publish --config

Это создаст новый файл livewire.php в каталоге config вашего приложения Laravel.

Ручное включение ресурсов фронтенда Livewire

По умолчанию Livewire внедряет необходимые ему JavaScript- и CSS-активы в каждую созданную страницу, включающую компонент Livewire.

Если требуется больший контроль над этим поведением, можно вручную включить активы на страницу с помощью следующих директив Blade:

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

Включая эти активы на страницу вручную, Livewire тем самым определяет, что не нужно внедрять их автоматически.

AlpineJS поставляется в комплекте с Livewire

Поскольку Alpine поставляется в комплекте с JavaScript-активами Livewire, необходимо включать @livewireScripts на каждой странице, где будет использоваться Alpine. Даже если вы не будете использовать Livewire на этой странице.

Хотя это требуется редко, можно отключить автоматическую вставку активов в Livewire, изменив параметр inject_assets в файле конфигурации config/livewire.php вашего приложения:

'inject_assets' => false,

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

\Livewire\Livewire::forceAssetInjection();

Настройка endpoint обновления Livewire

Каждое обновление компонента Livewire отправляет сетевой запрос на сервер по следующей конечной точке: https://example.com/livewire/update.

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

В таких случаях можно зарегистрировать собственную конечную точку по своему усмотрению, и если это сделать внутри Livewire::setUpdateRoute(), то Livewire будет знать, что для всех обновлений компонента нужно использовать именно эту конечную точку:

Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/custom/livewire/update', $handle);
});

Теперь вместо /livewire/update Livewire будет отправлять обновления компонентов по адресу /custom/livewire/update.

Поскольку Livewire позволяет зарегистрировать собственный маршрут обновления, то можно объявить любой дополнительный middleware, который будет использоваться Livewire, непосредственно в setUpdateRoute():

Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/custom/livewire/update', $handle)
        ->middleware([...]); 
});

Настройка URL-адреса ресурсов Livewire

По умолчанию Livewire предоставляет свои JavaScript-активы по следующему URL: https://example.com/livewire/livewire.js. Кроме того, Livewire будет ссылаться на этот актив в теге script следующим образом:

<script src="/livewire/livewire.js" ...

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

Чтобы использовать пользовательскую конечную точку JavaScript-актива, можно зарегистрировать собственный маршрут внутри Livewire::setScriptRoute():

Livewire::setScriptRoute(function ($handle) {
    return Route::get('/custom/livewire/livewire.js', $handle);
});

И теперь Livewire загрузит свой JavaScript следующим образом:

<script src="/custom/livewire/livewire.js" ...

Ручная привязка Livewire и Alpine

По умолчанию Alpine и Livewire загружаются с помощью тега <script src="/livewire.js">, то есть нельзя контролировать порядок загрузки этих библиотек. Следовательно, импорт и регистрация плагинов Alpine, как показано в примере ниже, больше не будут работать:

// Внимание: Этот фрагмент демонстрирует, что НЕ нужно делать...
 
import Alpine from 'alpinejs'
import Clipboard from '@ryangjchandler/alpine-clipboard'
 
Alpine.plugin(Clipboard)
Alpine.start()

Для решения этой проблемы необходимо сообщить Livewire, что в дальнейшем будет использоваться версия модуля ESM (ECMAScript), и предотвратить внедрение тега <script src="/livewire.js">. Для этого необходимо добавить директиву @livewireScriptConfig в файл макета (resources/views/components/layouts/app.blade.php):

<html>
<head>
    <!-- ... -->
    @livewireStyles
    @vite(['resources/js/app.js'])
</head>
<body>
    {{ $slot }}
 
    @livewireScriptConfig 
</body>
</html>

Когда Livewire обнаружит директиву @livewireScriptConfig, то воздержится от внедрения скриптов Livewire и Alpine. Если вы используете директиву @livewireScripts для ручной загрузки Livewire, обязательно удалите ее. Обязательно добавьте директиву @livewireStyles, если она еще не присутствует.

Последний шаг - импорт Alpine и Livewire в наш файл app.js, позволяющий зарегистрировать любые пользовательские ресурсы, и, наконец, запуск Livewire и Alpine:

import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'
 
Alpine.plugin(Clipboard)
 
Livewire.start()

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

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

Установка Livewire 3