namespace App\Livewire;

use App\Models\Post; use Livewire\Attributes\Layout; use Livewire\Component;

class PostIndex extends Component { #[Layout('layouts.app')] public function render() { $posts = Post::get(); return view('livewire.post-index', [ 'posts' => $posts ]); } }#[Layout('layouts.app')], fungsi baru dari livewire v3 yang di gunakan untuk mengubah default layout yang kita gunakan, secara default livewire versi 3 mengharuskan kita meletakkan layout berada pada directory resources/components/layouts/app.blade.phppada resources/views/layouts/navigation.blade.php cari bagian link dan rubah seperti berikut<!-- Navigation Links --> <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"> <x-nav-link wire:navigate :href="route('dashboard')" :active="request()->routeIs('dashboard')"> {{ __('Dashboard') }} </x-nav-link> </div> <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex"> <x-nav-link wire:navigate :href="route('posts.index')" :active="request()->routeIs('post')"> {{ __('Post') }} </x-nav-link> </div>wire:navigate  fungsi baru dari livewire v3 yang di gunakan untuk membuat aplikasi menjadi SPA (SIngle Page Application) sehingga ketika kita mengklik link tidak ada proses reload halamanMembuat Routetambahkan route baru seperti berikutRoute::middleware('auth')->group(function () { ...

Route::get('/posts', PostIndex::class)->name('posts.index');

});jangan lupa untuk mengimport PostIndex.phpuse App\Livewire\PostIndex;Compile assetnpm run dev