Фронтенд для Laravel - Livewire - Ручная привязка Livewire и AlpineJS

По умолчанию 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):

@livewireScriptConfig 

Когда 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()