Директива @livewireScripts

Директива @livewireScripts подключает основной JavaScript-файл Livewire на страницу. Она необходима для работы всех интерактивных функций: обновлений, обработки событий, загрузки файлов и так далее. Директива помещается в секцию head или перед закрывающим тегом body и генерирует тег <script> с ссылкой на скрипт Livewire. Также она добавляет небольшой инициализирующий код.

Синтаксис

<!DOCTYPE html>
<html>
<head>
	@livewireStyles
</head>
<body>
	@livewire('counter')
	@livewireScripts
</body>
</html>

Пример

Создадим простое приложение: счётчик с кнопкой, которая увеличивает число. Обязательно подключим директиву @livewireScripts на главной странице, чтобы счётчик работал:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

		public function inc()
		{
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<button wire:click="inc">
	+
</button>
<span>{{ $num }}</span>

<!DOCTYPE html>
<html>
<head>
	@livewireStyles
</head>
<body>
	@livewire('counter')
	@livewireScripts
</body>
</html>

Результат выполнения кода:

<button>
	+
</button>
<span>1</span>

При клике число увеличивается, потому что @livewireScripts загрузила клиентскую логику и связала её с компонентом.

Пример

Рассмотрим ситуацию, когда скрипты подключены в голове документа. Иногда это нужно для раннего выполнения кода. Используем атрибут defer для отложенной загрузки:

<!DOCTYPE html>
<html>
<head>
	@livewireStyles
	@livewireScripts
</head>
<body>
	@livewire('counter')
</body>
</html>

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

Смотрите также

директиву @livewireStyles,
которая подключает CSS-стили для корректного отображения Livewire
директиву @this,
которая используется для вызова методов компонента из JavaScript
директиву @assets,
которая подключает дополнительные ресурсы (CSS и JS)
директиву @script,
которая позволяет встраивать пользовательский JavaScript в Livewire-шаблон