Команда make:livewire

Команда make:livewire генерирует два файла для нового компонента Livewire: класс компонента в директории app/Livewire и шаблон в директории resources/views/livewire. Команда принимает имя компонента в качестве аргумента и поддерживает вложенные директории через точечную нотацию.

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

Синтаксис

php artisan make:livewire ComponentName

Пример

Давайте создадим компонент Counter, который будет отображать счетчик и кнопку для его увеличения:

php artisan make:livewire Counter

В результате выполнения команды будут созданы два файла:

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

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

Для использования компонента в Blade-шаблоне достаточно разместить тег @livewire('Counter') или использовать синтаксис <livewire:counter />.

Пример

Создадим компонент в поддиректории с помощью точечной нотации:

php artisan make:livewire Admin.UserProfile

Это создаст компонент UserProfile в директории app/Livewire/Admin и шаблон в resources/views/livewire/admin/user-profile.blade.php:

<?php
	namespace App\Livewire\Admin;
	
	use Livewire\Component;
	
	class UserProfile extends Component
	{
		public $name = '';
		public $email = '';
		
		public function render()
		{
			return view('livewire.admin.user-profile');
		}
	}
?>

<div>
	<input type="text" wire:model="name" placeholder="Name">
	<input type="email" wire:model="email" placeholder="Email">
	<p>Name: {{ $name }}</p>
	<p>Email: {{ $email }}</p>
</div>

Для использования вложенного компонента в Blade необходимо указать полный путь через точку: <livewire:admin.user-profile /> или @livewire('admin.user-profile').

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

команду livewire:convert,
которая преобразует существующий HTML-шаблон в Livewire-компонент
команду livewire:layout,
которая создает новый layout для компонентов
команду livewire:form,
которая создает новый компонент формы
команду livewire:move,
которая перемещает компонент в другую директорию