Livewire/volt counter not being incremented

Hi everyone,

I decided to give Volt a try today and basically copy/pasted the example from their documentation with the counter and it does not work. I used the functional API and the class based API and still no luck. When I use it the Livewire way (separate files for the php and blade) without Volt it works. I would appreciate. This is what I have tried literally from documentation. I have put some ray() logging in the increment method and nothing is happening. I did php artisan volt:install before that.

Any ideas why it is not working?

<?php
 
use Livewire\Volt\Component;
 
new class extends Component {
    public $count = 0;
 
    public function increment()
    {
        $this->count++;
    }
} ?>
 
<div>
    <h1>{{ $count }}</h1>
    <button wire:click="increment">+</button>
</div>

thinkverse

2 years ago

Best Answer

Level 15

How are you using the component? Using <livewire:counter /> or as an anonymous component?

You also need to make sure you have the full HTML document when loading a Livewire v3 component so Livewire can inject its JavaScript. Here are two examples, one using the regular Livewire and the latter with an anonymous component:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Counter</title>
</head>
<body>
    <livewire:counter />
</body>
</html>

As an anonymous component.

<?php

use function Livewire\Volt\{state};

state(['count' => 0]);

$increment = fn () => $this->count++;

?>
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Counter</title>
</head>
<body>
    @volt('counter')
    <div>
        <h1>{{ $count }}</h1>
        <button wire:click="increment">+</button>
    </div>
    @endvolt
</body>
</html>

Both work as a regular view from a route and as a Folio page.

Route::view('/counter', 'counter');

1 like

bobbyborisov

2 years ago

Level 8

Thanks @thinkverse! I was using it with Folio by creating pages/volt.blade.php and using only livewire:counter/ component there. By the way I have views/components/layouts/app.blade.php from invoking php artisan livewire:layout but I guess this folio page does not use this layout and thats why it is not working.

Once I added the full HTML document it works. I guess I need to see how to use layouts with Folio pages

thinkverse

2 years ago

Level 15

@bobbyborisov Folio pages are basically just enhanced Blade views so you can use Blade components and layouts like you usually do.

{{-- views/pages/volt.blade.php --}}
<x-layouts.app>
    <livewire:counter />
</x-layouts.app>

1 like

bobbyborisov

2 years ago

Level 8

@thinkverse thanks once again. That worked like a charm!

[email protected]

1 year ago

Level 9

I'm stuck implementing the same counter component.. I want to use

Volt::route('counter', 'counter'), but getting this htmlspecialchars() error about must be of type string , closure given.

Please or to participate in this conversation.