Search code examples
laravel-livewirelaravel-10

Livewire 3 wire:navigate shows current year instead of html content


i am developing a web app with laravel 10 with Livewire 3, trying to scripting for SPA (Single Page Application), problem is when i click "account" button its load the blank page with current year as a text "2023" instead of accoount.blade.php content.

this is what i have tried:

from Livewire/App.php:

<?php

namespace App\Livewire;

use Livewire\Component;

class Main extends Component
{
    public function render()
    {
        return view('app');
    }
}

from resources\views\livewire\app.blade.php:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    @livewireStyles
</head>
<body>
    <main class="content-wrapper">

        @include('header')

        <div class="container-xxl flex-grow-1 container-p-y">

            @yield('content')

        </div>

    </main>
    @livewireScripts
</body>
</html>

from resources\views\header.blade.php:

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/account" wire:navigate>Account</a>
          </li>
        </ul>
      </div>
    </div>
</nav>

from Livewire/Account.php:

<?php

namespace App\Livewire;

use Livewire\Component;

class Account extends Component
{
    public function render()
    {
        return view('livewire.account')
            ->extends('app')
            ->section('content');
    }
    
}

from resources\views\livewire\account.blade.php:

<div>
    Account Page
</div>

the result is once page loads: enter image description here

What wrong i have done here?


Solution

  • I guess you have misconfigured the Livewire.

    1. Follow the Official documentation on how to create a layout file.

    2. You need to create a layout file under the resources/views/components/layouts/app.blade.php

    3. For load content, you need to add $slot in your layout file.

    and then wire:navigate will work.