Директива @assets

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

Синтаксис

@assets
	<link rel="stylesheet" href="path/to/style.css">
	<script src="path/to/script.js"></script>
@endassets

Пример

Давайте подключим внешний CSS файл и JavaScript скрипт в компоненте Livewire:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name = 'John Doe';
		public $age = 30;
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div>
	@assets
		<link rel="stylesheet" href="{{ asset('css/user-profile.css') }}">
		<script src="{{ asset('js/user-profile.js') }}"></script>
	@endassets
	
	<div class="profile-card">
		<h2>{{ $name }}</h2>
		<p>Age: {{ $age }}</p>
		<button wire:click="updateProfile">Update</button>
	</div>
</div>

Пример

Давайте подключим несколько CSS файлов для разных стилей в одном компоненте:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Dashboard extends Component
	{
		public $stats = [100, 200, 300, 400];
		
		public function render()
		{
			return view('livewire.dashboard');
		}
	}
?>

<div>
	@assets
		<link rel="stylesheet" href="{{ asset('css/dashboard.css') }}">
		<link rel="stylesheet" href="{{ asset('css/charts.css') }}">
		<script src="{{ asset('js/dashboard.js') }}"></script>
	@endassets
	
	<div class="dashboard-grid">
		@foreach ($stats as $stat)
			<div class="stat-item">{{ $stat }}</div>
		@endforeach
	</div>
</div>

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

директиву @livewire,
которая инициализирует Livewire компонент на странице
директиву @script,
которая позволяет выполнять JavaScript код внутри компонента
директиву @entangle,
которая синхронизирует данные между Livewire и Alpine.js
директиву @teleport,
которая перемещает содержимое в другое место DOM-дерева