Belajar Livewire 4 #8 – Konfigurasi Layout

Tutorial lengkap Livewire 4 dan Laravel 12 yang membahas konsep, fitur terbaru, dan praktik terbaik membangun aplikasi web modern tanpa ribet JavaScript. Materi disusun bertahap dari dasar hingga studi kasus nyata dengan penjelasan mengalir dan mudah dipahami.

Kurnia Andi Nugroho

✅ Telah dilihat 172 kali

Rating: 5.00 ⭐

04 February 2026, 06:33

Membuat Layout di Livewire 4

Dalam aplikasi web modern, layout bisa kita anggap sebagai kerangka utama tampilan aplikasi. Di dalam layout inilah biasanya terdapat elemen-elemen yang bersifat global, seperti:

header
navigasi
footer
dan struktur halaman utama

Dengan menggunakan layout, kita tidak perlu menulis ulang struktur HTML yang sama di setiap halaman.

Layout di Livewire 4

Livewire 4 menyediakan cara yang sangat praktis untuk mengelola layout. Kita bisa mendefinisikan satu layout utama, lalu menggunakannya kembali di berbagai komponen Livewire.

Untuk membuat layout bawaan Livewire, silakan jalankan perintah berikut di terminal (pastikan masih berada di dalam direktori project Laravel):

php artisan livewire:layout

Apa yang Terjadi Setelah Perintah Dijalankan?

Setelah perintah ini dijalankan, Livewire akan otomatis:

Membuat file layout utama
Menyediakan struktur HTML dasar
Menyiapkan tempat khusus untuk merender konten komponen

Biasanya file layout akan dibuat di lokasi:

resources/views/livewire/layouts/app.blade.php

File inilah yang nantinya berperan sebagai template utama untuk seluruh halaman Livewire.

Konfigurasi Layout Livewire 4

Setelah layout Livewire berhasil dibuat, sekarang kita akan mengonfigurasi isi layout utama. Layout ini akan menjadi kerangka tampilan untuk seluruh halaman Livewire di aplikasi kita. Silakan buka resources/views/livewire/layouts/app.blade.php, kemudian sesuaikan menjadi seperti dibawah ini:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ $title ?? config('app.name') }}</title>

    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @livewireStyles
</head>

<body class="min-h-screen text-gray-800 antialiased">

    <!-- Background Gradient -->
    <div class="fixed inset-0 -z-10 bg-gradient-to-br from-indigo-500/20 via-sky-400/20 to-purple-500/20"></div>

    <!-- Header -->
    <header class="sticky top-0 z-30">
        <div class="backdrop-blur-md bg-white/60 border-b border-white/30 shadow-sm">
            <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">

                <!-- Brand -->
                <a href="/" wire:navigate
                    class="text-lg font-semibold tracking-tight text-gray-900 hover:text-indigo-600 transition">
                    {{ config('app.name') }}
                </a>

                <!-- Navigation -->
                <nav class="flex items-center gap-6 text-sm font-medium">
                    <a href="/" wire:navigate
                        class="text-gray-600 hover:text-indigo-600 transition
                  {{ request()->is('/') ? 'text-indigo-600' : '' }}">
                        Home
                    </a>

                    <a href="/posts" wire:navigate
                        class="text-gray-600 hover:text-indigo-600 transition
                  {{ request()->is('posts*') ? 'text-indigo-600' : '' }}">
                        Posts
                    </a>
                </nav>
            </div>

        </div>
    </header>

    <!-- Content -->
    <main class="max-w-6xl mx-auto px-6 py-10">
        <div
            class="relative rounded-2xl bg-white/70 backdrop-blur-xl
                   border border-white/30 shadow-xl p-6 md:p-8">

            <!-- Optional decorative blur -->
            <div class="absolute -top-10 -right-10 w-32 h-32 bg-indigo-400/30 rounded-full blur-3xl"></div>

            {{ $slot }}
        </div>
    </main>

    <!-- Footer -->
    <footer class="text-center text-xs text-gray-500 py-6">
        © {{ date('Y') }} {{ config('app.name') }} •
        Dibuat oleh
        <a href="https://lagikoding.com"
            target="_blank"
            class="font-medium text-indigo-600 hover:text-indigo-700">
            lagikoding.com
        </a>
        • Laravel12 & Livewire4
    </footer>

    @livewireScripts
</body>

</html>

Agar mudah dipahami, kita bahas bagian-bagian penting dari layout ini.

1. Struktur HTML Dasar

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

Bagian ini adalah struktur HTML standar. Atribut lang otomatis mengikuti bahasa aplikasi Laravel, sehingga lebih ramah untuk SEO dan accessibility.

2. Bagian `<head>`

<title>{{ $title ?? config('app.name') }}</title>

@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles

Di sini kita mengatur:

Title halaman Bisa diisi dinamis dari komponen Livewire, dan jika tidak ada akan menggunakan nama aplikasi.
Vite Untuk memuat Tailwind CSS dan JavaScript.
Livewire Styles Wajib ada agar Livewire bisa bekerja dengan baik.

3. Body dan Background

<body class="min-h-screen text-gray-800 antialiased">

Body dibuat:

Full tinggi layar
Teks halus dan nyaman dibaca

Ditambah background gradient yang bersifat dekoratif, supaya tampilan tidak kaku dan lebih modern.

4. Header dan Navigasi

Bagian header dibuat sticky, artinya tetap di atas saat halaman di-scroll.

Di dalamnya terdapat:

Brand / nama aplikasi
Menu navigasi (Home dan Posts)

<a href="/" wire:navigate>...</a>

Penggunaan wire:navigate adalah fitur Livewire 4 yang memungkinkan:

Navigasi tanpa reload halaman
Transisi lebih cepat dan halus

Class request()->is() digunakan untuk menandai menu yang sedang aktif.

5. Area Konten Utama (`$slot`)

{{ $slot }}

Inilah bagian paling penting dalam layout.

$slot adalah tempat di mana:

Konten dari komponen Livewire akan dirender
Setiap halaman memiliki isi berbeda, tapi tetap menggunakan layout yang sama

Dengan pendekatan ini:

Layout tetap satu
Konten bisa berganti-ganti

6. Footer

Footer berisi:

Tahun otomatis
Nama aplikasi
Credit pembuat
Informasi teknologi yang digunakan

Footer dibuat sederhana agar tidak mengganggu fokus utama pengguna.

7. Livewire Scripts

@livewireScripts

Ini wajib ada, biasanya diletakkan sebelum tag </body>. Tanpa ini, interaksi Livewire seperti klik, submit, dan update data tidak akan berjalan.