Secara bawaan Script dan Style Livewire disisipkan otomatis kedalam Layout *.blade.php bila ingin menyisipkannya secara manual bisa ikuti langkah berikut: Cara Disable Auto Inject Script dan Style Livewire
config/livewire.php
<?php
return [
...
'inject_assets' => false, // default true
...
];inject_assets di set ke true
Tidak ada yang perlu dilakukan karena kedua aset tersebut disisipkan pada tag head dan body.
resources/views/livewire/component/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
</head>
<body>
{{ $slot }}
</body>
</html>inject_assets di set ke false
Saat di set ke false kita dapat memasukan @livewireStyles dan @livewireScripts kedalam layout sesuai keingin dimana aset tersebut akan di proses namun biasanya @livewireStyles diletakan diantara tag <head></head> sedangkan @livewireScripts diletakan diantara tag <body></body>.
Sehingga terlihat seperti ini.
resources/views/livewire/component/app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>Setelah diuraikan oleh Web Browser kurang lebih seperti ini pratinjau html-nya.
HTML
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<!-- Livewire Styles -->
<style>
[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}
</style>
</head>
<body>
<div id="slot"></div>
<script src="/livewire/livewire.min.js?id=xxxxxx" data-csrf="xxxxxx" data-update-uri="/livewire/update" data-navigate-once="true" type="text/javascript"></script>
</body>
</html>