Kurnia Andi Nugroho
0 comment
Pada Livewire versi 4, komponen tidak lagi hanya berperan sebagai bagian kecil dari halaman. Sekarang, komponen Livewire bisa digunakan langsung sebagai halaman penuh dengan cara menghubungkannya langsung ke route.
Pendekatan ini membuat pengembangan aplikasi menjadi jauh lebih rapi dan efisien. Teman-teman bisa membangun satu halaman aplikasi lengkap hanya dari satu komponen Livewire, lengkap dengan layout, judul halaman, dan parameter route.
Untuk menjadikan sebuah komponen sebagai halaman, kita cukup mendaftarkannya di file routes/web.php menggunakan metode Route::livewire().
Contohnya seperti berikut:
Route::livewire('/posts/create', 'pages::post.create');
Ketika URL /posts/create diakses, Livewire akan langsung merender komponen tersebut sebagai satu halaman utuh, bukan sekadar potongan tampilan.
Dengan pendekatan ini, Livewire otomatis menggunakan layout aplikasi yang sudah disiapkan.
Secara default, komponen yang dirender melalui route akan menggunakan file layout utama aplikasi, yaitu:
resources/views/layouts/app.blade.php
Jika file ini belum ada, Livewire sudah menyediakan perintah untuk membuatnya:
php artisan livewire:layout
Perintah ini akan menghasilkan file layout standar. Yang terpenting, pastikan layout tersebut memiliki placeholder {{ $slot }}, karena di sanalah konten komponen akan ditampilkan.
Contoh struktur layout sederhana:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" c>
<title>{{ $title ?? config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body>
{{ $slot }}
@livewireScripts
</body>
</html>
Jika aplikasi memiliki lebih dari satu layout (misalnya layout dashboard dan layout publik), Livewire menyediakan beberapa cara untuk mengaturnya.
Layout default bisa diubah melalui file konfigurasi config/livewire.php:
'component_layout' => 'layouts::dashboard',
Dengan ini, semua page component akan menggunakan layout tersebut secara otomatis.
Kadang, satu halaman membutuhkan layout yang berbeda. Untuk kasus ini, kita bisa menentukan layout langsung di dalam komponen.
#[Layout]use Livewire\Attributes\Layout;
use Livewire\Component;
new #[Layout('layouts::dashboard')] class extends Component {
// ...
};
render()public function render()
{
return $this->view()
->layout('layouts::dashboard');
}
Kedua cara ini valid dan bisa dipilih sesuai gaya penulisan yang disukai.
Judul halaman sangat penting, baik untuk pengalaman pengguna maupun untuk SEO.
Pastikan layout memiliki title yang bersifat dinamis:
<title>{{ $title ?? config('app.name') }}</title>
use Livewire\Attributes\Title;
use Livewire\Component;
new #[Title('Create Post')] class extends Component {
// ...
};
Saat halaman dirender, judul browser akan berubah menjadi Create Post.
Jika judul perlu dibuat secara dinamis, bisa menggunakan method render():
public function render()
{
return $this->view()
->title('Create Post');
}
Selain $slot utama, layout juga bisa memiliki slot tambahan. Misalnya, kita ingin mengatur bahasa halaman secara dinamis.
Layout:
<html lang="{{ str_replace('_', '-', $lang ?? app()->getLocale()) }}">
Kemudian di view komponen:
<x-slot:lang>fr</x-slot>
<div>
Konten halaman berbahasa Prancis
</div>
Dengan cara ini, setiap halaman bisa memiliki konfigurasi layout yang berbeda tanpa harus membuat banyak file layout baru.
Dalam aplikasi nyata, halaman sering kali membutuhkan data dari URL, seperti ID post.
Route:
Route::livewire('/posts/{id}', 'pages::show-post');
Komponen:
use App\Models\Post;
use Livewire\Component;
new class extends Component {
public Post $post;
public function mount($id)
{
$this->post = Post::findOrFail($id);
}
};
Livewire otomatis akan mengirim nilai {id} ke parameter $id pada method mount().
Laravel memiliki fitur route model binding, dan Livewire mendukungnya sepenuhnya.
Route:
Route::livewire('/posts/{post}', 'pages::show-post');
Komponen:
use App\Models\Post;
use Livewire\Component;
new class extends Component {
public Post $post;
public function mount(Post $post)
{
$this->post = $post;
}
};
Bahkan, untuk kode yang lebih ringkas, method mount() bisa dihilangkan sama sekali:
use App\Models\Post;
use Livewire\Component;
new class extends Component {
public Post $post;
};
Livewire akan otomatis mengisi properti $post berdasarkan parameter {post} pada route.
Dengan pendekatan page component di Livewire 4, arsitektur aplikasi menjadi jauh lebih bersih, deklaratif, dan mudah dipelihara. Routing, layout, judul halaman, hingga binding model semuanya bisa ditangani langsung di level komponen.
Bagi teman-teman yang terbiasa dengan Blade + Controller, pendekatan ini mungkin terasa berbeda di awal, tetapi dalam praktiknya justru mempercepat pengembangan dan mengurangi boilerplate secara signifikan.
Kurnia Andi Nugroho
Web & Mobile App Developer, Laravel, Inertia, Vue.Js, React.Js
Founder of Lagikoding.com Laravel Enthusiast & Web Developer