LiveWire & Laravel Component: Html Not SHOW UP

Question

I'm working with Laravel v10 and in my project I tried the following to make a custom component with livewire.

I ran: php artisan make:component CounterDisplay

created a new file named: resources/views/components/counter-display.blade.php which goes like this:

<div>
    Counter Value: {{ $count }}
</div>

Then ran php artisan make:livewire Counter to created a new livewire component (app/Http/Livewire/Counter.php):

// app/Livewire/Counter.php
namespace App\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public $count = 0;

    public function increment()
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Then created a new blade file resources/views/livewire/counter.blade.php:

<!-- resources/views/livewire/counter.blade.php -->
<div>
    <button wire:click="increment">Increment</button>
    <x-counter-display :count="$count" />
</div>

With this route:

use App\Livewire\Counter;

Route::get('/counter', function () {
    return view('counter', ['counter' => Counter::class]);
});

And also created a blade file named counter.blade.php:

<!-- resources/views/counter.blade.php -->
@extends('layouts.app')

@section('content')
    <livewire:counter />
@endsection

Now when I visit the /counter, nothing show up!

However when I check dd at counter-display.blade.php,:

@dd(2) <!-- Properly returns 2 but the html not show up -->
<div>
    Counter Value: {{ $count }}
</div>

It will show the output but strange that the even the Counter Value: text is not printed while there is no error.

So if you have any idea what's going wrong about this, please let me know...

I'm really stuck with this!

Answer 1

You would call the livewire component on your blade like

@livewire('counter')

Answer 2

You have generated CounterDisplay using:

php artisan make:component CounterDisplay

so I suppose you have both counter-display.blade.php and /View/Components/CounterDisplay.php

To let $counter reach counter-display.blade.php you must manage it in the constructor of CounterDisplay.php:

<?php

namespace App\View\Components;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class CounterDisplay extends Component
{
    public function __construct(public int $count)
    {
    }

    public function render(): View|Closure|string
    {
        return view('components.counter-display');
    }
}

or if you prefer the 'classic' way:

// .....

class CounterDisplay extends Component
{
    public int $count;


    public function __construct(int $count)
    {
        $this->count = $count;
    }

    // .....
}

Otherwise you can delete /View/Components/CounterDisplay.php and declare the $count property directly in the counter-display.blade.php view:

@props (['count'])

<div>
    Counter Value: {{ $count }}
</div>

after you have done these modifications, it is advisable to run:

composer dump-autoload
php artisan view:clear