Sebelumnya saya menceritakan sedikit pengalaman menggunakan Livewire pada project Laravel saya. Pada project saya tersebut menggunakan 2 layout, layout 1 yaitu bawaan dari laravel saya gunakan sebagai tampilan User, sedangkan Layout 2 saya gunakan untuk tampilan Admin, apabila anda menggunakan Livewire, anda harus melakukan salah satu konfigurasi untuk mengaktifkan layout 2 supaya pada saat file Blade anda menggunakan Layout 2 tidak error atau tidak beralih ke Layout 1. Untuk mengaktifkannya ikut cara dibawah ini
CARA PERTAMA
2.Lalu klik folder Livewire
3.klik pada folder Config dan klik file livewire.php
4.Lalu cari layout pada file livewire.php seperti gambar dibawah ini
5.Dan tambahkan layout baru seperti gambar dibawah ini
6.Selesai, untuk lebih lengkapnya anda bisa mengunjungi Documentasi website Livewire klik disini
CARA KEDUA
Buat dua file layout app pada direktori
resources/views/layouts
dengan nama yang berbeda, misalnyaapp1.blade.php
danapp2.blade.php
.Buka file
app/Http/Livewire/Component.php
, lalu tambahkan baris berikut di bagian atas:
use Layouts\App1;
use Layouts\App2;
- Tambahkan kode berikut pada method
render()
untuk menentukan layout mana yang akan digunakan:
public function render()
{
if ($this->layout == 'app1')
{
return view('livewire.my-component')->layout('layouts.app1');
}
elseif ($this->layout == 'app2')
{
return view('livewire.my-component')->layout('layouts.app2');
}
}
- Kemudian, pada method
mount()
, tambahkan parameter$layout
yang akan menentukan layout yang akan digunakan:
controllerpublic function mount($layout)
{
$this->layout = $layout;
}
- Terakhir, buatlah dua link atau tombol yang akan mengarahkan ke halaman dengan layout yang berbeda. Contohnya:
<a href="{{ route('my-component', ['layout' => 'app1']) }}">App 1</a>
<a href="{{ route('my-component', ['layout' => 'app2']) }}">App 2</a>
Dengan cara ini, Anda dapat menambahkan dua layout app pada Livewire Laravel dan menampilkan tampilan yang berbeda-beda pada kedua layout tersebut.